vue3 前端导出excel
安装npm install xlsx --save npm install file-saver --savetemplatedivclasshomeViewBoxel-buttontypeprimaryclickhandleExport(导出,#exportTab)导出1/el-buttonel-buttontypeprimaryclickstartExport导出2/el-buttonel-table:datastate.tableDataidexportTabstripestylewidth:100%el-table-columnv-for(item, index) in state.navList:keyindex:propitem.prop:labelitem.name:show-overflow-tooltiptrue/el-table-column/el-table/div/templatescriptsetupimport*asFileSaverfromfile-saverimport*asXLSXfromxlsximport{reactive,onMounted}fromvue;onMounted((){})conststatereactive({navList:[{name:编号,prop:bh},{name:时间,prop:time},{name:类型,prop:type},{name:电话,prop:sjh},{name:内容,prop:nr},{name:姓名,prop:xm},{name:证件号,prop:zjh},],tableData:[{bh:编号1,time:2020-09-09 09:09:09,type:java,sjh:123456,nr:aaaa,xm:aaaa,zjh:aaaa,},{nbh:编号2,time:2020-09-09 09:09:09,type:php,sjh:123456,nr:bbbbb,xm:bbbbb,zjh:bbbbb,},],})conststartExport(){// 拿到接口数据map成想要导出的数据consttitleArr1state.navList.map(elel.name)constexportdataListstate.tableData.map(el{return{time:el.time,type:el.type,zjh:el.zjh,}})exportExcel00(exportdataList,学生表,titleArr1,sheetName);}// 封装导出的方法 数据 表文件名 表头 导出sheetName名字constexportExcel00(json,name,titleArr,sheetName){/* convert state to workbook */vardatanewArray();varkeyArraynewArray();constgetLengthfunction(obj){varcount0;for(variinobj){if(obj.hasOwnProperty(i)){count;}}returncount;};for(constkey1injson){if(json.hasOwnProperty(key1)){constelementjson[key1];varrowDataArraynewArray();for(constkey2inelement){if(element.hasOwnProperty(key2)){constelement2element[key2];rowDataArray.push(element2);if(keyArray.lengthgetLength(element)){keyArray.push(key2);}}}data.push(rowDataArray);}}// keyArray为英文字段表头data.splice(0,0,keyArray,titleArr);console.log(data,data);constwsXLSX.utils.aoa_to_sheet(data.splice(1));constwbXLSX.utils.book_new();// // 此处隐藏英文字段表头// var wsrows [{ hidden: true }];// ws[!rows] wsrows; // ws - worksheetXLSX.utils.book_append_sheet(wb,ws,sheetName);XLSX.writeFile(wb,name.xlsx);}//fileName 导出文件名idName 导出table的idxlsxParam 导出配置handleExport(fileName,idName#exportTab){letxlsxParam{raw:true};// 导出的内容只做解析不进行格式转换letwbXLSX.utils.table_to_book(document.querySelector(idName),xlsxParam);letwboutXLSX.write(wb,{bookType:xlsx,bookSST:true,type:array,});try{FileSaver.saveAs(newBlob([wbout],{type:application/octet-stream}),${fileName}记录表.xlsx);}catch(e){if(typeofconsole!undefined){console.log(e,wbout);}}returnwbout;}/scriptstylelangscssscoped/style