长春建设平台网站的公司,个人主页背景图,网站域名类型,深圳建网页xlsx文件预览 Luckysheet是什么#xff1f;代码实现xlsx文件预览引入luckysheet的相关依赖安装luckyexcel指定一个表格容器实现逻辑 Luckysheet是什么#xff1f;
Luckysheet #xff0c;一款纯前端类似excel的在线表格#xff0c;功能强大、配置简单、完全开源。
Luckys… xlsx文件预览 Luckysheet是什么代码实现xlsx文件预览引入luckysheet的相关依赖安装luckyexcel指定一个表格容器实现逻辑 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 relstylesheet hrefhttps://cdn.jsdelivr.net/npm/luckysheetlatest/dist/plugins/css/pluginsCss.css /link relstylesheet hrefhttps://cdn.jsdelivr.net/npm/luckysheetlatest/dist/plugins/plugins.css /link relstylesheet hrefhttps://cdn.jsdelivr.net/npm/luckysheetlatest/dist/css/luckysheet.css /link relstylesheet hrefhttps://cdn.jsdelivr.net/npm/luckysheetlatest/dist/assets/iconfont/iconfont.css /script srchttps://cdn.jsdelivr.net/npm/luckysheetlatest/dist/plugins/js/plugin.js/scriptscript srchttps://cdn.jsdelivr.net/npm/luckysheetlatest/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 stylewidth: 100%; idxlsxPreviewdiv idluckysheet stylemargin: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,},});});},}
