vue 实现在线预览Excel-LuckyExcel/LuckySheet实现方案

一、准备工作

1. npm安装 luckyexcel

npm i -D luckyexcel

2.引入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的需求了。