微信公众号制作网站郑州seo团队

Luckysheet是什么？

Luckysheet ，一款纯前端类似excel的在线表格，功能强大、配置简单、完全开源。

Luckysheet 已不再维护，推荐使用 Univer 替代；虽然不在维护，但是不影响他功能以及特性的强大，还是可以正常使用；

本来我是想尝试用Univer，但是我的项目是一个引入vue2的H5项目，所以只能用Luckysheet 来实现；

如果想探索和了解更多点击官方中文文档或者gitHub仓库地址查询和学习；

代码实现xlsx文件预览

我项目里新建的一个xlsxPreview.html，实现，点击文件后，调转到该页面实现预览；

引入luckysheet的相关依赖

我这里在xlsxPreview.html中直接是CDN引入，你也可以安装后再build打包后把dist文件夹下的所有文件复制到项目目录，然后通过相对路径引入，这个官方文档有介绍，这里就不写了，我们直接用CDN引入，

 //我这里引入vue,是为了说明在下面H5中使用了vue的写法，<script src='../../js/vue.js'></script>//你只需要引入下面的即可<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/css/pluginsCss.css' /><link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/plugins.css' /><link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/css/luckysheet.css' /><link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/assets/iconfont/iconfont.css' /><script src="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/js/plugin.js"></script><script src="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/luckysheet.umd.js"></script>

安装luckyexcel

npm install  luckyexcel --save

把node_modules中安装的luckyexcel 复制出来到H5目录下，在xlsxPreview.html通过script引入；

<script src="../../luckyexcel/dist/luckyexcel.umd.js"></script>

指定一个表格容器

 <div style="width: 100%;" id="xlsxPreview"><div id="luckysheet" style="margin:0px;padding:5px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;" ></div></div>

实现逻辑

  mounted() {const fileId = getParam("fileId")this.getFile(fileId)},methods:{getFile(fileId){$.ajax({url:"/api-file/file/getFileByte",type: 'post',responseType:'blob',data: {fileId: fileId,},beforeSend: function (request) {request.setRequestHeader("Authorization", "Bearer " + JSON.parse(window.sessionStorage.getItem('store') || '{}').token);},success:(res) => {// 将Base64字符串转换为二进制字符串const path = res.dataconst raw = window.atob(path);const rawLength = raw.length;const uInt8Array = new Uint8Array(rawLength);for (let i = 0; i < rawLength; ++i) {uInt8Array[i] = raw.charCodeAt(i);}const xlsxBlob = new Blob([uInt8Array],{type:'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'})const file = new File([xlsxBlob], 'XXX.xlsx', { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });var files = [];files.push(file);this.uploadExcel(files)},error:(err) => {alert('文件加载失败，请稍后重试！')}})},uploadExcel(files) {if (files == null || files.length == 0) return alert('没有文件等待导入');let name = files[0].name;let suffixArr = name.split('.'),suffix = suffixArr[suffixArr.length - 1];if (suffix != 'xlsx') return alert('目前只支持导入xlsx文件');LuckyExcel.transformExcelToLucky(files[0], function (exportJson, luckysheetfile) {if (exportJson.sheets == null || exportJson.sheets.length == 0) return alert('读取excel文件内容失败, 目前不支持XLS文件!');luckysheet.destroy();luckysheet.create({data: exportJson.sheets,title: exportJson.info.name,userInfo: exportJson.info.name.creator,container: 'luckysheet', // 设定DOM容器的idshowtoolbar: false, // 是否显示工具栏showinfobar: false, // 是否显示顶部信息栏showstatisticBar: false, // 是否显示底部计数栏showsheetbar:true,sheetBottomConfig: true, // sheet页下方的添加行按钮和回到顶部按钮配置allowEdit: false, // 是否允许前台编辑enableAddRow: false, // 是否允许增加行enableAddCol: false, // 是否允许增加列sheetFormulaBar: false, // 是否显示公式栏enableAddBackTop: false, // 返回头部按钮showsheetbar: false, // 是否显示底部sheet页按钮enableAddRow: false,//允许添加行// 自定义配置底部sheet页按钮showsheetbarConfig: {add: false,menu: true,},});});},}