首先安装依赖
cnpm i lukysheet
cnpm i luckyexcel
!!!lukysheet需要在public=》index.html进行手动引入
在node-module把lukysheet包找出来,然后把里面的dict文件夹copy到public里面
这里自己改了文件名
然后引入
<link rel='stylesheet' href='luckysheet/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='luckysheet/plugins/plugins.css' />
<link rel='stylesheet' href='luckysheet/css/luckysheet.css' />
<link rel='stylesheet' href='luckysheet/assets/iconfont/iconfont.css' />
<script src="luckysheet/plugins/js/plugin.js"></script>
<script src="luckysheet/luckysheet.umd.js"></script>
就引入成功了
然后在vue里使用
import LuckyExcel from 'luckyexcel'
import luckysheet from 'luckysheet'
引入
调用接口拿取数据 ,EXPORTBTNPOST是我自己封装好的,返回的是blob
async getDetail(row) {
console.log(row)
this.dialogVisible = true
try {
const res = await EXPORTBTNPOST('/government/export/exportRegister?projectId=1&&status=2')
console.log(res)
// 二进制流(blob)转file对象
// const files = new window.File([res], '成绩详情.xlsx', { type: 'application/vnd.ms-excel;charset=utf-8' })
// console.log(files)
LuckyExcel.transformExcelToLucky(res.data, exportJson => {
console.log(exportJson)
if (!exportJson.sheets || exportJson.sheets.length === 0) {
this.$message.warning('读取excel文件内容失败')
return
}
this.initExcel(exportJson)
})
} catch (e) {
console.log(e)
}
},
initExcel方法就是正题了,将数据渲染出来
initExcel(exportJson) {
const name = '成绩详情'
// eslint-disable-next-line
luckysheet.destroy()
// eslint-disable-next-line
luckysheet.create({
container: 'luckysheet', // luckysheet为容器id
lang: 'zh', // 默认语言
title: name,
data: exportJson.sheets // 导入excel数据
})
},
差点忘了,然后就是template里面创建渲染容器,,style里面可以设置容器基础样式尺寸等等
<div id="luckysheet" style="margin:0px auto;padding:0px;width:99vw;height:93vh;" />