JS 导出 Excel 文件、SheetJS（xlsx）前端导出 Excel

一、JS 导出 Excel 文件!DOCTYPEhtmlhtmllangenheadmetacharsetUTF-8/metahttp-equivX-UA-CompatiblecontentIEedge/metanameviewportcontentwidthdevice-width, initial-scale1.0/titleJS 导出 Excel 文件/titlestyle*{margin:0;padding:0;box-sizing:border-box;}.app{margin:20px 0 0 20px;}table{border:0.5px solid black;}td, th{width:100px;height:30px;line-height:30px;text-align:center;border:0.5px solid black;}/style/headbodydivclassapptableiddatacellspacing0trth序号/thth姓名/thth年龄/th/trtrtd1/tdtd张三/tdtd25/td/trtrtd2/tdtd李四/tdtd30/td/tr/table!-- 必须是 a 标签如果是 button 标签没有 href 属性如果无法设置 href 属性就不能生成 Excel文件 --aidtoExcelhref导出 Excel 文件/a/divscriptvartoExceldocument.getElementById(toExcel);toExcel.onclickfunction(event){// 获得表格的 HTML 标签和文本数据varmyHtmlhtml head meta charsetUTF-8 /head body${document.getElementById(data).outerHTML}/body /html;// 创建一个 Blob 对象// 第一个参数是文件的数据// 第二个参数是文件类型属性对象varmyBlobnewBlob([myHtml],{type:application/vnd.ms-excel,});varmyTargetevent.target;// 利用 URL.createObjectURL 方法为元素 myTarget 生成 blobURLmyTarget.hrefURL.createObjectURL(myBlob);// 设置文件名myTarget.download人员表;};/script/body/html二、SheetJSxlsx前端导出 Excel安装依赖pnpmaddxlsx核心 API 调用链路import*asXLSXfromxlsx;// 1、准备数据数组对象constrows[{姓名:张三,年龄:28,部门:技术部},{姓名:李四,年龄:32,部门:产品部},];// 2、数组对象 → 工作表WorksheetconstworksheetXLSX.utils.json_to_sheet(rows);// 3、新建工作簿WorkbookconstworkbookXLSX.utils.book_new();// 4、将工作表追加到工作簿并指定工作表名称XLSX.utils.book_append_sheet(workbook,worksheet,员工信息);// 5、指定工作簿名称吗触发浏览器下载文件XLSX.writeFile(workbook,导出文件_${Date.now()}.xlsx);Excel 工作簿就是 Excel 文件本身