基于Vue的Excel文件预览（使用LuckyExcel、LuckySheet实现）

您所在的位置：网站首页 › excle表格预览 › 基于Vue的Excel文件预览（使用LuckyExcel、LuckySheet实现）

基于Vue的Excel文件预览（使用LuckyExcel、LuckySheet实现）

2024-07-16 17:04| 来源: 网络整理| 查看: 265

一、介绍

二、基本思路

三、安装

Luckyexcel

Luckysheet

CDN引入：

本地引入：

四、具体实现：

1、首先需要一个页面，用于excel的预览展示。

2、编写Excel解析渲染函数：openExcel(url链接，文件名)。

3、最后在create函数里编写从某页面跳转此页面之后的渲染逻辑。

4、如果处理的数据量较大，可以使用Luckysheet配置参数中的loadUrl和loadSheetUrl来分Sheet页加载。

excel文件位于文件资源服务器上，可以直接访问excel文件链接获取文件。基于这种情况将excel文件展示在网页上，只提供预览功能。

一、介绍

Luckysheet：一款开源的、纯前端的、类似excel的在线表格。可以藉此实现在线excel预览、编辑、导入导出及其他各种excel表格相关操作。

Luckyexcel，Luckysheet的一款适配插件的excel导入导出库，只支持.xlsx格式文件（不支持.xls）。

二、基本思路

1、使用LuckyExcel的transformExcelToLuckyByUrl=function (url, name, callBack) 方法将excel文件转换成LuckySheet需要的数据格式。

2、使用LuckySheet将上述数据渲染到页面上。

三、安装 Luckyexcel

npm下载：npm install luckyexcel --save

Luckysheet 在/publiic/index.html文件里引入即可（可以本地引入，也可以CDN引入）。 CDN引入：本地引入： npm下载luckysheet，然后将包内plugins、css、fonts、assets文件夹及luckysheet.umd.js放入public下的某目录，然后引入对应文件。

参考如下(/public/static/luckysheet)。

四、具体实现： 1、首先需要一个页面，用于excel的预览展示。

页面中需要一个固定id的容器，用于承接Luckysheet的渲染，这里命名id为“luckysheet”。此外，容器需要设置好样式，尤其宽高。

2、编写Excel解析渲染函数：openExcel(url链接，文件名)。

-- 使用LuckyExcel.transformExcelToLuckyByUrl(url, name,(exportJson, luckysheetfile) => {回调函数}）。其中exportJson是Luckyexcel解析好的Excel文件数据，其中部分字段如下：

{ "info": { "appversion": "14.0300 ", "company": "", "createdTime": "2020-11-10T02:35:00Z", "creator": "Apache POI", "lastmodifiedby": "SSRS", "modifiedTime": "2023-07-11T02:54:58Z", "name": null }, "sheets": [{ --sheet表集合 "celldata": [{ --每个单元格数的数据 "c": 0, "r": 0, "v": { "bg": "#FFFFFF", "bl": 1, "ct": { "fa": "General", "t": "s" }, "ff": "微软雅黑", "fs": 18, "ht": 0, "qp": 1, "tb": 2, "v": "单元格内容", "vt": 0 } }], "config": {}, --当前sheet表的配置格式 "index": "3", --sheet表的index "name": "XXXXXX", --sheet表名 "order": "0", --sheet表的次序 "showGridLines": "1", "status": "1" --sheet表显示状态，哪个显示哪个是1 }] }

-- 使用window.luckysheet.create(options)函数预览excel表格。options参考如下：

整体配置 | Luckysheet文档

-- 其中在回调函数里将exportJson的sheets数据赋给options.data即可

loadUrl先加载默认sheet表的数据和所有sheet表的基本配置信息，随后切换到其它页的时候再请求loadSheetUrl将其数据补全。两个参数均为接口地址，使用post请求。具体数据格式见文档。

由于excel文件是本身存在的，没有用后端生成，如果再使用后端构建数据集的话不太方便，所以我采用Luckyexcel加载文件所有数据，然后拆分exportJson，构建成两个数据集firstData和secondData。firstData是loadUrl配置的接口应该返回数据，secondData是loadSheetUrl配置的接口应该返回的数据。

然后，修改Luckysheet的源码，全局搜索，将所有对应$.post(loadurl, {"gridKey" : server.gridKey}, function (d) {里面的内容})和$.post(loadSheetUrl, {"gridKey" : server.gridKey, "index": sheetindex.join(",")}, function (d) {里面的内容})的post请求外皮注释掉，只留下post请求里面的回调函数function (d)里面的内容，并将里面的内容中的原参数d改为loadurl或loadSheetUrl。

最后编译打包，将生成的文件替换掉在安装步骤“引入luckysheet”时引入的文件。

此时，在原项目中注释掉options配置的data，将JSON.stringify(firstData)赋给loadUrl，JSON.stringify(secondData)赋给loadSheetUrl即可。

最终代码如下：

返回保存 import LuckyExcel from 'luckyexcel'; import {defineComponent, nextTick} from "vue"; import {reactive} from "vue"; export default defineComponent({ created() { const fileUrl= this.$route.query.url ? this.$route.query.url : null const fileName= this.$route.query.name ? this.$route.query.name : null this.state.fileUrl = fileUrl this.state.fileName = fileName if (fileUrl == null) { alert("error") } else { // 加载文件内容 this.openExcel({url:fileUrl,name:fileName}) } }, setup() { const state = reactive({ fileUrl: '', fileName: '' }); const totalHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; const openExcel = ({url:url,name:name}) => { nextTick(() => { LuckyExcel.transformExcelToLuckyByUrl(url, name,(exportJson, luckysheetfile) => { if (exportJson.sheets == null || exportJson.sheets.length === 0) { alert("Fail to read the content of the excel file") return; } // /public/statis/luckysheet文件夹下是被修改的luckysheet源码 // loadUrl、loadSheetUrl不再使用post接口请求，而是直接传递现成数据加载（数据格式与原post返回格式一致） // 构建loadUrl: firstData(包括所有sheet表的格式，和第一个sheet的数据) // loadSheetUrl:secondData (包括除第一个sheet表的其他所有表的数据) 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 } console.log('exportJson',exportJson) // luckysheet生成网页excel window.luckysheet.destroy() window.luckysheet.create({ container: 'luckysheet', // 设定DOM容器的id showtoolbar: false, // 是否显示工具栏 showinfobar: false, // 是否显示顶部信息栏 showsheetbarConfig: { add: false, //新增sheet menu: true, //sheet管理菜单 sheet: true //sheet页显示 }, sheetRightClickConfig: { delete: false, // 删除 copy: false, // 复制 rename: false, //重命名 color: false, //更改颜色 hide: false, //隐藏，取消隐藏 move: false, //向左移，向右移 }, showstatisticBar: false, // 是否显示底部计数栏 sheetBottomConfig: false, // sheet页下方的添加行按钮和回到顶部按钮配置 allowEdit: false, // 是否允许前台编辑 enableAddRow: false, // 是否允许增加行 enableAddCol: false, // 是否允许增加列 sheetFormulaBar: false, // 是否显示公式栏 enableAddBackTop: false, //返回头部按钮 // data: [exportJson.sheets[0]], //表格内容 gridKey: url, loadUrl: JSON.stringify(firstData), //首先加载的数据，被修改后需要String类型 loadSheetUrl: JSON.stringify(secondData), //随后加载的数据，被修改后需要String类型 title: exportJson.info.name, //表格标题 }); }) }) }; return { totalHeight, simpleImage: Empty.PRESENTED_IMAGE_SIMPLE, state, openExcel } } })

【本文地址】

基于Vue的Excel文件预览（使用LuckyExcel、LuckySheet实现）

基于Vue的Excel文件预览（使用LuckyExcel、LuckySheet实现）

今日新闻

推荐新闻