记录使用 xlsx 前端导出文件
记录使用 xlsx 前端导出文件
开发中会遇到表格导出文件的需求，可以使用 xlsx 和 file-saver 库完成
安装
npm i xlsx file-saver -S基本使用
// 假设你有一个数据数组const exportData = [{ name: '张三', email: 'test@example.com', age: 20 },{ name: '李四', email: 'test2@example.com', age: 25 },// ...更多数据];// 将数组转换为工作表// 1.头部排放顺序const header = ['name', 'email', 'age'];// 2.头部名称const headerDisplay = { name: '名称', email: '邮箱', age: '年龄' };// 3.组成新数据const newData = [headerDisplay, ...exportData];// skipHeader = true 忽视原来的头const worksheet = XLSX.utils.json_to_sheet(newData, { header: header, skipHeader: true });// 创建工作簿并添加工作表const workbook = XLSX.utils.book_new();XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');// 生成Excel文件const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });// 使用blob和FileReader创建一个Blob URLconst dataBlob = new Blob([excelBuffer], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8',});const blobUrl = window.URL.createObjectURL(dataBlob);// 使用saveAs下载文件saveAs(dataBlob, `data_${Date.now()}.xlsx`);// 清理window.URL.revokeObjectURL(blobUrl);application/vnd.openxmlformats-officedocument.spreadsheetml.sheet 为 xlsx 类型 常见 MIME 类型列表
github地址
官网
中文文档
引用他人详细使用文章