Vue3實現(xiàn)LuckSheet在線預覽Excel表格

更新時間：2023年11月22日 08:53:50 作者：晨曦

在前端開發(fā)中預覽Excel文件是常見的需求之一,本文將介紹如何使用Vue.js框架以及兩個優(yōu)秀的Excel庫——LuckyExcel和Luckysheet,來實現(xiàn)Excel文件在線預覽功能,希望對大家有所幫助

LuckSheet和LuckyExcel

在前端開發(fā)中預覽Excel文件是常見的需求之一。本文將介紹如何使用Vue.js框架以及兩個優(yōu)秀的Excel庫——LuckyExcel和Luckysheet，來實現(xiàn)Excel文件在線預覽功能。

LuckSheet是一款基于Web的在線表格組件，一款純前端類似excel的在線表格，功能強大、配置簡單、完全開源結合Vue3可以實現(xiàn)數(shù)據(jù)的動態(tài)展示和編輯，為用戶提供良好的用戶體驗。

準備工作

首先，需要在Vue3項目中安裝LuckSheet組件庫，可以通過npm或yarn進行安裝：

npm install luckysheet

或者

yarn add luckysheet

安裝完成后，可以在Vue3項目中引入LuckSheet組件并進行配置。

【參考】Luckysheet官方文檔

實現(xiàn)LuckSheet組件

在Vue3項目中，可以創(chuàng)建一個LuckSheet組件來實現(xiàn)在線預覽Excel表格的功能。在LuckSheet組件中，可以使用LuckSheet提供的API來加載和展示Excel表格數(shù)據(jù)，并且可以實現(xiàn)數(shù)據(jù)的編輯和保存功能。

<template>
    <div>
        <!-- excel表格容器 -->
        <a-card :bordered="false" :style="{ background: '#fff' }">
            <div id="luckysheet" :style="{ margin: '0px', padding: '0px', width: '100%', height: contentHeight + 'px' }" />
        </a-card>
    </div>
</template>


<script setup>
import $script from 'scriptjs'
import LuckyExcel from 'luckyexcel'
import { nextTick } from 'vue'
import { reactive } from 'vue'
import { message } from 'ant-design-vue'

//父組件傳遞參數(shù)
const props = defineProps({
    fileUrl: {
        type: String,
        default: '',
    },
    fileName: {
        type: String,
        default: '',
    },
})
const state = reactive({
    fileUrl: '',
    fileName: '',
})
//初始化加載
onMounted(() => {
     //動態(tài)引入文件
    $script(['/lib/luckysheet/plugins/js/plugin.js', '/lib/luckysheet/luckysheet.umd.js', '/lib/luckysheet/loadCss.js'], 'luckysheet')
    $script.ready('luckysheet', function () {
        const fileUrl = props.fileUrl ? props.fileUrl : ''
        const fileName = props.fileName ? props.fileName : ''
        state.fileUrl = fileUrl
        state.fileName = fileName
        if (fileUrl == null) {
            console.log('error')
        } else {
            // 加載文件內(nèi)容
            openExcel({ url: fileUrl, name: fileName })
        }
    })
})
//監(jiān)聽重新渲染組件
watch(
    () => props.fileUrl,
    () => {
        openExcel({ url: props.fileUrl, name: props.fileName })
    }
)
//動態(tài)計算高度
const totalHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
const contentHeight = totalHeight - 230
//渲染excel
const openExcel = ({ url: url, name: name }) => {
    nextTick(() => {
        LuckyExcel.transformExcelToLuckyByUrl(url, name, (exportJson, luckysheetfile) => {
            if (exportJson.sheets == null || exportJson.sheets.length === 0) {
                message.warning('無法讀取excel的內(nèi)容')
                return
            }
            const firstData = []
            const secondData = {}
            for (let i = 0; i < exportJson.sheets.length; i++) {
                firstData[i] = {
                    name: exportJson.sheets[i].name,
                    index: exportJson.sheets[i].index,
                    order: exportJson.sheets[i].order,
                    status: exportJson.sheets[i].status,
                    config: exportJson.sheets[i].config,
                }
                firstData[i].config.row = 10
                parseInt(exportJson.sheets[i].status) === 1 ? (firstData[i].celldata = exportJson.sheets[i].celldata) : 0 == 0
                secondData[exportJson.sheets[i].index] = exportJson.sheets[i].celldata
            }
            // luckysheet生成網(wǎng)頁excel
            window.luckysheet.destroy()
            window.luckysheet.create({
                lang: 'zh',
                container: 'luckysheet', // 設定DOM容器的id
                showtoolbar: false, // 是否顯示工具欄
                showinfobar: false, // 是否顯示頂部信息欄
                showstatisticBar: true, // 是否顯示底部計數(shù)欄
                sheetBottomConfig: false, // sheet頁下方的添加行按鈕和回到頂部按鈕配置
                allowEdit: false, // 是否允許前臺編輯
                enableAddRow: false, // 是否允許增加行
                enableAddCol: false, // 是否允許增加列
                sheetFormulaBar: false, // 是否顯示公式欄
                data: exportJson.sheets, //表格內(nèi)容
                enableAddBackTop: true, //返回頂部
                title: exportJson.info.name, //表格標題
                sheetRightClickConfig: {
                    delete: false, // 刪除
                    copy: false, // 復制
                    rename: false, //重命名
                    color: false, //更改顏色
                    hide: false, //隱藏，取消隱藏
                    move: false, //向左移，向右移
                },
                showsheetbarConfig: {
                    add: false,
                },
                devicePixelRatio: window.devicePixelRatio, //分辨率
                defaultFontSize: 20, //默認字體大小
                cellRightClickConfig: {
                    copy: false, // 復制
                    copyAs: false, // 復制為
                    paste: false, // 粘貼
                    insertRow: false, // 插入行
                    insertColumn: false, // 插入列
                    deleteRow: false, // 刪除選中行
                    deleteColumn: false, // 刪除選中列
                    deleteCell: false, // 刪除單元格
                    hideRow: false, // 隱藏選中行和顯示選中行
                    hideColumn: false, // 隱藏選中列和顯示選中列
                    rowHeight: false, // 行高
                    columnWidth: false, // 列寬
                    clear: false, // 清除內(nèi)容
                    matrix: false, // 矩陣操作選區(qū)
                    sort: false, // 排序選區(qū)
                    filter: false, // 篩選選區(qū)
                    chart: false, // 圖表生成
                    image: false, // 插入圖片
                    link: false, // 插入鏈接
                    data: false, // 數(shù)據(jù)驗證
                    cellFormat: false, // 設置單元格格式
                },
            })
        })
    })
}
</script>

在LuckSheet組件中，通過引入Luckysheet庫并動態(tài)加載樣式文件，使用window.Luckysheet.create方法來創(chuàng)建LuckSheet實例，將Excel表格數(shù)據(jù)和配置選項傳入實例中即可實現(xiàn)在線預覽Excel表格的功能。

頁面使用

<template>
<div>
   <a-card :bordered="false" :loading="loading" :style="{ background: '#fff' }">
      <lucksheetExcel :fileName="state.fileName" :fileUrl="state.fileUrl"></lucksheetExcel>
  </a-card>
</div>
</template>
<script lang="ts"  setup>
//導入組件
import {lucksheetExcel } from 'xxxxxxx'
//預覽方式
const token = 'Bearer ' + getToken()
const fileUrlId = ref<string>('')
const state = reactive({
    fileUrl: `${import.meta.env.VITE_AXIOS_BASE_URL}/file/download/${fileUrlId.value}?Authorization=${token}`,
    fileName: '',
})
//預覽方法
const refreshTable = () => {
  // params請求參數(shù)
  getLucksheetAPI(params).then((res) => {
                fileUrlId.value = res.data.fileId
                state.fileUrl = `${import.meta.env.VITE_AXIOS_BASE_URL}/file/download/${fileUrlId.value}?Authorization=${token}`
            })
            .catch((err) => {
                console.log(err)
            })

}
onActivated(() => {
    refreshTable()
})

</script>