基于Vue的Excel文件预览（使用LuckyExcel、LuckySheet实现）
·
目录
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引入：
<link rel='stylesheet' href='./static/luckysheet/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='./static/luckysheet/plugins/plugins.css' />
<link rel='stylesheet' href='./static/luckysheet/css/luckysheet.css' />
<link rel='stylesheet' href='./static/luckysheet/assets/iconfont/iconfont.css' />
<script src="./static/luckysheet/plugins/js/plugin.js"></script>
<script src="./static/luckysheet/luckysheet.umd.js"></script>本地引入：
- npm下载luckysheet，然后将包内plugins、css、fonts、assets文件夹及luckysheet.umd.js放入public下的某目录，然后引入对应文件。
参考如下(/public/static/luckysheet)。
<link rel='stylesheet' href='./static/luckysheet/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='./static/luckysheet/plugins/plugins.css' />
<link rel='stylesheet' href='./static/luckysheet/css/luckysheet.css' />
<link rel='stylesheet' href='./static/luckysheet/assets/iconfont/iconfont.css' />
<script src="./static/luckysheet/plugins/js/plugin.js"></script>
<script src="./static/luckysheet/luckysheet.umd.js"></script>四、具体实现：
1、首先需要一个页面，用于excel的预览展示。
页面中需要一个固定id的容器，用于承接Luckysheet的渲染，这里命名id为“luckysheet”。此外，容器需要设置好样式，尤其宽高。
<template>
<div>
<div id="luckysheet" :style="{ margin: '0px',padding:'0px',width:'100%',height: '800px' }"/>
</div>
</template>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参考如下：
-- 其中在回调函数里将exportJson的sheets数据赋给options.data即可
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;
}
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, //表格内容
title: exportJson.info.name, //表格标题
});
})
})
};3、最后在create函数里编写从某页面跳转此页面之后的渲染逻辑。
created() {
// 上一个页面采用router.push({name: "ExcelShow", query: {url: url,name: name}}) 方式跳转传参
// 获取参数： excel文件链接url及其名称name
const fileUrl= this.$route.query.url ? this.$route.query.url : null
const fileName= this.$route.query.name ? this.$route.query.name : null
if (fileUrl == null) {
alert("error")
} else {
// 加载文件内容
this.openExcel({url:fileUrl,name:fileName})
}
},4、如果处理的数据量较大，可以使用Luckysheet配置参数中的loadUrl和loadSheetUrl来分Sheet页加载。
loadUrl先加载默认sheet表的数据和所有sheet表的基本配置信息，随后切换到其它页的时候再请求loadSheetUrl将其数据补全。两个参数均为接口地址，使用post请求。具体数据格式见文档。
由于excel文件是本身存在的，没有用后端生成，如果再使用后端构建数据集的话不太方便，所以我采用Luckyexcel加载文件所有数据，然后拆分exportJson，构建成两个数据集firstData和secondData。firstData是loadUrl配置的接口应该返回数据，secondData是loadSheetUrl配置的接口应该返回的数据。
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的源码，全局搜索，将所有对应$.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即可。
最终代码如下：
<template>
<div>
<a-page-header title="Title" sub-title="This is a subtitle" @back="() => $router.go(-1)">
<template #extra>
<a-button @click="() => this.$router.back()">返回</a-button>
<a-button v-if="!state.err" type="primary" @click="downfile({url: state.fileUrl,name: state.fileName})">保存</a-button>
</template>
</a-page-header>
<a-card :bordered="false" :style="{ background: '#fff', minHeight: '280px' }">
<div id="luckysheet" :style="{ margin: '0px',padding:'0px',width:'100%',height: totalHeight+'px' }"/>
</a-card>
</div>
</template>
<script>
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
}
}
})
</script>
旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。
更多推荐
5
0- 0
已为社区贡献1条内容
所有评论(0)