一、JS 导出 Excel 文件
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metahttp-equiv="X-UA-Compatible"content="IE=edge"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><title>JS 导出 Excel 文件</title><style>*{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></head><body><divclass="app"><tableid="data"cellspacing="0"><tr><th>序号</th><th>姓名</th><th>年龄</th></tr><tr><td>1</td><td>张三</td><td>25</td></tr><tr><td>2</td><td>李四</td><td>30</td></tr></table><!-- 必须是 a 标签，如果是 button 标签没有 href 属性，如果无法设置 href 属性，就不能生成 Excel文件 --><aid="toExcel"href="">导出 Excel 文件</a></div><script>vartoExcel=document.getElementById("toExcel");toExcel.onclick=function(event){// 获得表格的 HTML 标签和文本数据varmyHtml=`<html> <head> <meta charset='UTF-8'> </head> <body>${document.getElementById("data").outerHTML}</body> </html>`;// 创建一个 Blob 对象// 第一个参数是文件的数据// 第二个参数是文件类型属性对象varmyBlob=newBlob([myHtml],{type:"application/vnd.ms-excel",});varmyTarget=event.target;// 利用 URL.createObjectURL 方法为元素 myTarget 生成 blobURLmyTarget.href=URL.createObjectURL(myBlob);// 设置文件名myTarget.download="人员表";};</script></body></html>
二、SheetJS（xlsx）前端导出 Excel
- 安装依赖
pnpmaddxlsx
- 核心 API 调用链路
import*asXLSXfrom"xlsx";// 1、准备数据，数组对象constrows=[{姓名:'张三',年龄:28,部门:'技术部'},{姓名:'李四',年龄:32,部门:'产品部'},];// 2、数组对象 → 工作表（Worksheet）constworksheet=XLSX.utils.json_to_sheet(rows);// 3、新建工作簿（Workbook）constworkbook=XLSX.utils.book_new();// 4、将工作表追加到工作簿，并指定工作表名称XLSX.utils.book_append_sheet(workbook,worksheet,'员工信息');// 5、指定工作簿名称吗，触发浏览器下载文件XLSX.writeFile(workbook,`导出文件_${Date.now()}.xlsx`);
