一、准备工作
1. npm安装 luckyexcel
npm i -D luckyexcel2.引入luckysheet
注意：引入luckysheet，只能通过CDN或者直接引入静态资源的形式，不能npm install。
个人建议直接下载资源引入。我给你们提供一个下载资源的地址：
https://gitee.com/ichiva_admin/luckysheet-saved-in-recovery/tree/master/src/main/resources/static/module/luckysheel-2.1.13
直接放进工程的public文件夹下，在index.html中引入一下资源：
<link rel="stylesheet" href="./plugins/css/pluginsCss.css"/>
<link rel="stylesheet" href="./plugins/plugins .css"/>
<link rel="stylesheet" href="./css/luckysheet .css"/>
<link rel="stylesheet" href="./assets/iconfont/iconfont.css"/>
<script src="./plugins/js/plugin.js"></script>
<script src="./luckysheet.umd.js"></script>注意：自行整理下路径，不要错了。
准备工作完毕了。
二、预览Excel
由于后台给到的数据，就是二进制数据。因为他们导出和预览实际上用的是同一个接口。那么，我们需要将二进制数据解析为文件对象，通过luckyexcel的方法转变为json对象，然后通过luckysheet显示出来。
1.准备显示dom
<div id="luckysheet" style="width: 800px; height: 600px;"> </div>
<!--
需要注意两点
1.id 要记住，下边初始化excel会使用容器id；
2.容器的宽高要设置好，否则显示不出来；
-->2.请求接口
import axios from 'axios';
// 预览 请求excel二进制数据
axios.get({
url: '你的后台请求地址'，
params: '参数',
methods: 'post',
responseType: 'blob' // 注意 这一步很关键 必须注明请求的数据类型是blob
})3.解析数据
import LuckyExcel from "luckyexcel";
// 假设我们的请求接口时 getExcelData
// 以下方法是具体处理逻辑
async getExcel () {
try {
const res = await getExcelData('你的参数');
const files = new window.File([res], '你的文件名称', {type:"application/vnd.ms-excel;charset=utf-8"});
LuckyExcel.transformExcelToLucky(files, exportJson => {
if (!exportJson.sheets || exportJson.sheets.length === 0) {
ElMessage.warning('读取excel文件内容失败');
return;
}
// 调用初始化方法
this.initExcel(exportJson, '你的文件名称');
})
} catch (err) {
}
},
// 初始化对象
initExcel (json, title) {
this.$nextTick(() => {
// 先销毁 避免反复创建
luckysheet.destory();
// 创建表单
lucky.create({
container: '你的渲染容器的id', // 比如 <div id="渲染容器的id" style=""></div>
lang: 'zh', // 中文
title, // 标题
data: json.sheets,// excel的sheet数据
})
})
},
如上两步，就可以显示项目预览excel的需求了。
