做一个同城便民信息网站怎么做,徐州木塑模板,湛江网站建设技术托管,wordpress首页按照分类调用开发过程中#xff0c;需要开发一个在线编辑excel文档的功能#xff0c;找到了这个合适的组件 Luckysheet #xff0c;一款纯前端类似excel的在线表格#xff0c;功能强大、配置简单、完全开源。 可以导入文档#xff0c;预览、编辑、保存、导出等功能#xff0c;可以满…开发过程中需要开发一个在线编辑excel文档的功能找到了这个合适的组件 Luckysheet 一款纯前端类似excel的在线表格功能强大、配置简单、完全开源。 可以导入文档预览、编辑、保存、导出等功能可以满足大部分需求 第一步需要先安装 vue3 运行下面三个安装命令 npm install exceljs -S  npm install luckyexcel -S npm install file-saver 第二步前端部分index.html 加入引用代码 link relstylesheet href/luckysheet/pluginsCss.css /link relstylesheet href/luckysheet/plugins.css /link relstylesheet href/luckysheet/luckysheet.css /link relstylesheet href/luckysheet/iconfont.css /script src/luckysheet/plugin.js/scriptscript src/luckysheet/luckysheet.umd.js/script 组件部分test.vue templatediv styleposition: absolute; top: 0input iduploadBtn typefile changeloadExcel /button classbtn clickgetExcel后台数据/buttonspanOr文件:/spanselect v-modelselected changeselectExceloption disabled valueChoose/optionoption v-foroption in options :keyoption.text :valueoption.value{{ option.text }}/option/selectinput classinp typetext v-modelexcelTitelbutton classblueBtn clickeditClicked编辑/buttonbutton classbtn clicksaveExcel保存/buttona hrefjavascript:void(0) clickdownloadExcel下载/a/divdiv idluckysheet/divdiv v-showisMaskShow idtipDownloading/div /template test.vue script代码部分 import { ref, onMounted } from vue import http from /assets/js/procure-http.js import { exportExcel } from /components/export import LuckyExcel from luckyexcelconst isMaskShow ref(false) const selected ref() const jsonData ref({}) const excelTitel ref() const congifdata ref({container: luckysheet,title: bi, // 工作簿名称lang: zh, // 设定表格语言 国际化设置允许设置表格的语言支持中文(zh)和英文(en)allowCopy: false, // 是否允许拷贝showtoolbar: false, // 是否显示工具栏showinfobar: true, // 是否显示顶部信息栏showsheetbar: false, // 是否显示底部sheet页按钮showstatisticBar: false, // 是否显示底部计数栏sheetBottomConfig: false, // sheet页下方的添加行按钮和回到顶部按钮配置allowEdit: false, // 是否允许前台编辑enableAddRow: false, // 允许增加行enableAddCol: false, // 允许增加列userInfo: false, // 右上角的用户信息展示样式showRowBar: false, // 是否显示行号区域showColumnBar: false, // 是否显示列号区域sheetFormulaBar: false, // 是否显示公式栏enableAddBackTop: false,//返回头部按钮rowHeaderWidth: 0,//纵坐标columnHeaderHeight: 0,//横坐标showstatisticBarConfig: {count:false,view:false,zoom:false,},showsheetbarConfig: {add: false, //新增sheetmenu: false, //sheet管理菜单sheet: false, //sheet页显示},forceCalculation: true,//强制计算公式 }) const options ref([{ text: Money Manager.xlsx, value: https://xxxxxx/storage/salarytemp/20231222/20231222162622.xlsx },{text: Activity costs tracker.xlsx, value: https://xxxxxx/storage/salary/20231031/0f724adf33a2d3d0b95071b0c52fb711.xlsx} ])const loadExcel (evt) {const files evt.target.filesif (files null || files.length 0) {alert(No files wait for import)return}let name files[0].namelet suffixArr name.split(.),suffix suffixArr[suffixArr.length - 1]if (suffix ! xlsx) {alert(Currently only supports the import of xlsx files)return}LuckyExcel.transformExcelToLucky(files[0], 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}console.log(exportJson, exportJson)jsonData.value exportJsonconsole.log(exportJson.sheets)window.luckysheet.destroy()excelTitel.value exportJson.info.namecongifdata.value.data exportJson.sheetscongifdata.value.title exportJson.info.namecongifdata.value.userInfo exportJson.info.name.creatorwindow.luckysheet.create(congifdata.value)}) } const selectExcel (evt) {const value selected.valueconst name evt.target.options[evt.target.selectedIndex].innerTextif (value ) {return}isMaskShow.value trueLuckyExcel.transformExcelToLuckyByUrl(value, name, (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}console.log(exportJson, exportJson)jsonData.value exportJsonisMaskShow.value falsewindow.luckysheet.destroy()window.luckysheet.create({container: luckysheet, //luckysheet is the container idshowinfobar: false,data: exportJson.sheets,title: exportJson.info.name,userInfo: exportJson.info.name.creator})}) } // 导出 const downloadExcel () {exportExcel(luckysheet.getAllSheets(), excelTitel.value) } // 从后台获取数据 const getExcel () {http.get(/index/index, {}, res {if(res.code 200) {window.luckysheet.destroy()console.log(JSON.parse(res.data))congifdata.value.data JSON.parse(res.data)congifdata.value.title 测试window.luckysheet.create(congifdata.value)}}) } // 保存excel数据 const saveExcel () {var excel luckysheet.getAllSheets();//去除临时数据,减小体积for(var i in excel)excel[i].data undefined// console.log(JSON.stringify(data))http.post(/index/update, {data:JSON.stringify(excel)}, res {console.log(res)if(res.code 200) {}}) } const editClicked () {congifdata.value.showtoolbar truecongifdata.value.allowEdit trueluckysheet.create(congifdata.value) } // !!! create luckysheet after mounted onMounted(() {luckysheet.create(congifdata.value) }) /scriptstyle scoped #luckysheet {margin: 0px;padding: 0px;position: absolute;width: 100%;left: 0px;top: 30px;bottom: 0px;height:900px; }#uploadBtn {font-size: 16px; }#tip {position: absolute;z-index: 1000000;left: 0px;top: 0px;bottom: 0px;right: 0px;background: rgba(255, 255, 255, 0.8);text-align: center;font-size: 40px;align-items: center;justify-content: center;display: flex; } /style 运行后效果如图 本地引用文件的需要下载好组件