导出excel的逻辑:
excel整个表格专业名词是workbook ,里面每张表格是sheet
页面引入xlsx的库,https://unpkg.com/xlsx/dist/xlsx.core.min.js
把数据生成sheet,var sheet = XLSX.utils.json_to_sheet(jsonData) ,json_to_sheet是将由对象组成的数组转化成sheet,当然还有 aoa_to_sheet将一个二维数组转成sheet 和 table_to_sheet将table的dom直接转成sheet
创建虚拟的workbook,var wb = XLSX.utils.book_new()
把sheet添加到workbook里,XLSX.utils.book_append_sheet(wb, sheet, "这里是sheetName");
把workbook转成blob,var blob = workbook2blob(wb) ,这里workbook2blob需要手动写啦,下面会贴代码
利用a标签和createObjectURL实现下载功能,openDownloadDialog(blob, 'excel的标题.xlsx'); ,这里openDownloadDialog也会在下面放上代码
// 将workbook装化成blob对象functionworkbook2blob(workbook){// 生成excel的配置项varwopts = {// 要生成的文件类型bookType:"xlsx",// // 是否生成Shared String Table,官方解释是,如果开启生成速度会下降,但在低版本IOS设备上有更好的兼容性bookSST:false,type:"binary"};varwbout = XLSX.write(workbook, wopts);// 将字符串转ArrayBufferfunctions2ab(s){varbuf =newArrayBuffer(s.length);varview =newUint8Array(buf);for(vari =0; i != s.length; ++i) view[i] = s.charCodeAt(i) &0xff;returnbuf; }varblob =newBlob([s2ab(wbout)], {type:"application/octet-stream"});returnblob;}// 将blob对象创建bloburl,然后用a标签实现弹出下载框functionopenDownloadDialog(blob, fileName){if(typeofblob =="object"&& blobinstanceofBlob) { blob = URL.createObjectURL(blob);// 创建blob地址}varaLink =document.createElement("a"); aLink.href = blob;// HTML5新增的属性,指定保存文件名,可以不要后缀,注意,有时候 file:///模式下不会生效aLink.download = fileName ||"";varevent;if(window.MouseEvent) event =newMouseEvent("click");// 移动端else{ event =document.createEvent("MouseEvents"); event.initMouseEvent("click",true,false,window,0,0,0,0,0,false,false,false,false,0,null); } aLink.dispatchEvent(event);}// 用的例子letsheet1data = [ { department:"行政部", count:2}, { department:"前端部", count:2} ];letsheet2data = [ { name:"张三",do:"整理文件"}, { name:"李四",do:"打印"} ];letsheet3data = [ { name:"张大人",do:"vue"}, { name:"李大人",do:"react"} ];varsheet1 = XLSX.utils.json_to_sheet(sheet1data);varsheet2 = XLSX.utils.json_to_sheet(sheet2data);varsheet3 = XLSX.utils.json_to_sheet(sheet3data);/* create a new blank workbook */varwb = XLSX.utils.book_new();XLSX.utils.book_append_sheet(wb, sheet1,"部门统计");XLSX.utils.book_append_sheet(wb, sheet2,"行政部");XLSX.utils.book_append_sheet(wb, sheet3,"前端部");constworkbookBlob = workbook2blob(wb);openDownloadDialog(workbookBlob,`部门统计.xlsx`);复制代码
如果有想学习编程的初学者,可来我们的前端直播授课群的哦:571671034里面免费送整套系统的前端教程!