长春网站建设net,注册网站会不会有风险,网站搭建要求模板,seo咨询推广找推推蛙一. 需求
需要在内网项目中在线预览excel文档#xff0c;并可以下载
二.在项目中下载并引入luckysheet
1.打开项目根目录#xff0c;npm i luckyexcel 安装
npm i luckyexcel2.在项目的index.html文件中引入依赖
外网项目中的引入#xff08;CDN引入#xff09;#…一. 需求
需要在内网项目中在线预览excel文档并可以下载
二.在项目中下载并引入luckysheet
1.打开项目根目录npm i luckyexcel 安装
npm i luckyexcel2.在项目的index.html文件中引入依赖
外网项目中的引入CDN引入在index.html里面的引入
!DOCTYPE html
html langzh-cmn-Hansheadmeta charsetutf-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width,initial-scale1.0title数字化企业/titlelink 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/headbodydiv idapp/div
/html内网项目中的引入本地引入比较复杂
1.下载luckyexcel的文件在本地
地址https://gitee.com/mengshukeji/Luckysheet.git
2.npm i 安装以来并 npm run build打包打包之后生成的dist文件
npm run build3.dist文件夹改名为luckyexcel并复制自己所用项目的public静态资源文件夹 4.在index.html文件里引入以下几个文件
% BASE_URL %表示根目录
link relstylesheet href% BASE_URL %luckyexcel/plugins/css/pluginsCss.css /link relstylesheet href% BASE_URL %luckyexcel/plugins/plugins.css /link relstylesheet href% BASE_URL %luckyexcel/css/luckysheet.css /link relstylesheet href% BASE_URL %luckyexcel/assets/iconfont/iconfont.css /script src% BASE_URL %luckyexcel/plugins/js/plugin.js/scriptscript src% BASE_URL %luckyexcel/luckysheet.umd.js/script然后就可以正常的使用和引入了
在项目中的使用
1.import引入luckyexcel
import LuckyExcel from luckyexcel2.设置容器的宽高 div idluckysheet refluckysheet stylewidth:800px;height:600px;position: absolute;left: 3%;top: 8%; /div3.excel的渲染
注意luckyexcel的数据必须是Blob格式
viewOpen(data, fileName) {//渲染方法data表示Blob数据。fileName指的名称if (!data) {this.$message.warning(无数据)return}LuckyExcel.transformExcelToLucky(data, function(exportJson, luckysheetfile) {if (exportJson.sheets null || exportJson.sheets.length 0) {alert(Failed to read the content of the excel file, currently does not support xls files!)return}window.luckysheet.destroy()console.log(window.luckysheet, exportJson, fileName, 存在)window.luckysheet.create({data: exportJson.sheets,title: fileName,userInfo: exportJson.info.creator,container: luckysheet, // 设定DOM容器的idshowtoolbar: false, // 是否显示工具栏showinfobar: false, // 是否显示顶部信息栏showstatisticBar: true, // 是否显示底部计数栏sheetBottomConfig: false, // sheet页下方的添加行按钮和回到顶部按钮配置allowEdit: false, // 是否允许前台编辑enableAddRow: false, // 是否允许增加行enableAddCol: false, // 是否允许增加列sheetFormulaBar: false, // 是否显示公式栏enableAddBackTop: false, // 返回头部按钮showsheetbar: true, // 是否显示底部sheet页按钮// 自定义配置底部sheet页按钮showsheetbarConfig: {add: false,menu: false}})})},这这样就可以正常显示了,如需表格编辑等操作可以参考文档 https://gitee.com/RMLY_double_wei/Luckysheet/blob/master/README-zh.md
其它问题仅在自己项目中
我的luckysheet是再写弹出框里面第二次点击的时候可能会导致数据渲染不出来。所以就需要再关闭弹窗的时候把luckysheet销毁和移除。 window.luckysheet.destroy()
this.$refs.luckysheet.remove()
