1.引用
npm install luckyexcel
// 本地引入资源包
<link rel='stylesheet' href='<%= BASE_URL %>cdn-jsdelivr/pluginsCss.css' />
<link rel='stylesheet' href='<%= BASE_URL %>cdn-jsdelivr/plugins.css' />
<link rel='stylesheet' href='<%= BASE_URL %>cdn-jsdelivr/luckysheet.css' />
<link rel='stylesheet' href='<%= BASE_URL %>cdn-jsdelivr//iconfont.css' />
<script src="<%= BASE_URL %>cdn-jsdelivr/plugin.js"></script>
<script src="<%= BASE_URL %>cdn-jsdelivr/luckysheet.umd.js"></script>
2.运用
html骨架中定义id为luckysheet1的元素
<div id="luckysheet1" class="luckysheet" style="width:96%;height:99%;margin:0px;padding:0px;"></div>
script中引入以及接收到数据流的后续操作
import LuckyExcel from 'luckyexcel'
// 拿到数据流的处理方法
// 接口请求
async searchClick(){
let res = await blobExcel(this.params);
const objectURL = window.URL.createObjectURL(new Blob([res],{type: 'application/zip'}));
this.showTable=true;
this.uploadExcel(objectURL)
},
// 通过luckyexcel进行数据处理并显示
uploadExcel (url) {
LuckyExcel.transformExcelToLuckyByUrl(url, 'test3.xlsx', function (exportJson, luckysheetfile) {
if (exportJson.sheets == null || exportJson.sheets.length == 0) {
alert('Failed to read the content of the excel file, currently does not support xls files!')
return
}
window.luckysheet.destroy()
// 配置项
window.luckysheet.create({
container: 'luckysheet1',
data: exportJson.sheets,
title: exportJson.info.name,
userInfo: exportJson.info.name.creator,
lang: 'zh',
showinfobar: false,
showtoolbar: false,
allowEdit: false,
allowCopy: false,
editMode: true
})
})
},
3.效果展示
4.在显示过程中遇到的问题
1. luckyexcel 容器一定要给宽高,这样渲染才能看出又没有成功
2. 通过axios进行接口请求文件数据流,数据流会被过滤到catch中,所以在catch中要进行resolve()数据返回
3. 如果在显示过程中报npm下载的资源包内部错误,应该是项目中有些挂载在Array的方法与资源包冲突了