记录使用 xlsx 前端导出文件

本文主要是介绍记录使用 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地址

官网

中文文档

引用他人详细使用文章

这篇关于记录使用 xlsx 前端导出文件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---