当前位置：首页 > news >正文

前端excel导出

news 来源：原创 2025/5/23 18:41:32

在数据可视化和管理日益重要的今天，前端实现 Excel 导出功能已经成为众多项目中的刚需。

一、Excel 导出的常见场景

数据报表导出：在企业管理系统、数据分析平台中，用户经常需要将系统中的数据以 Excel 表格的形式导出，便于离线查看、编辑和分析。例如，销售数据报表、财务报表等。
用户自定义数据导出：一些应用允许用户筛选、处理数据后，将处理结果导出为 Excel 文件。像电商平台中，用户可以导出自己的订单数据。
系统日志导出：开发和运维人员需要导出系统日志进行问题排查和分析，Excel 格式便于数据的整理和搜索。

二、实现 Excel 导出的依赖库选择

在前端实现 Excel 导出，有多个优秀的依赖库可供选择。

SheetJS（xlsx）

SheetJS 是一个功能强大且兼容性极佳的 JavaScript 库，它能够解析和生成多种表格格式，包括 Excel 的.xlsx和.xls文件。其核心优势在于支持广泛的浏览器环境，并且对 Node.js 也有良好的支持，方便前后端通用。通过SheetJS，你可以直接操作表格数据，如添加数据、设置单元格样式等，灵活性极高。

FileSaver.js

FileSaver.js 是一个专注于文件保存功能的轻量级库，它提供了简单统一的接口来保存文件，支持 Blob 和 DataURL 两种格式。在 Excel 导出场景中，通常会与其他库配合使用，将生成的 Excel 数据转换为 Blob 对象后，借助 FileSaver.js 实现文件的下载保存。

xlsx-js-style

xlsx-js-style 是在 SheetJS 基础上扩展了单元格样式设置功能的库。如果你对导出的 Excel 文件有样式方面的需求，如字体颜色、背景色、边框等，使用xlsx-js-style 可以轻松实现这些效果，让导出的表格更加美观和专业。

三、使用 SheetJS 实现基础 Excel 导出

接下来，我们通过一个简单的示例，演示如何使用 SheetJS 实现前端 Excel 导出。

// 需要安装xlsx库
npm install xlsx // 在 HTML 文件中引入相关脚本（如果你使用的是 CDN 方式）：<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>在 JavaScript 代码中，我们创建一个简单的数据数组，并将其转换为 Excel 文件进行导出：// 创建示例数据const data = [["姓名", "年龄", "城市"],["张三", 25, "北京"],["李四", 30, "上海"],["王五", 35, "广州"]];// 将数据转换为SheetJS的工作簿对象const worksheet = XLSX.utils.aoa_to_sheet(data);const workbook = XLSX.utils.book_new();XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");// 将工作簿对象转换为二进制字符串const wbout = XLSX.write(workbook, { bookType: 'xlsx', type: 'binary' });// 将二进制字符串转换为Blob对象function s2ab(s) {const buf = new ArrayBuffer(s.length);const view = new Uint8Array(buf);for (let i = 0; i < s.length; i++) {view[i] = s.charCodeAt(i) & 0xff;}return buf;}const blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' });// 利用FileSaver.js保存文件（需先引入FileSaver.js库）saveAs(blob, "example.xlsx");

上述代码首先创建了一个包含数据的二维数组，然后使用aoa_to_sheet方法将其转换为 SheetJS 的工作表对象，再将工作表添加到工作簿中。最后，通过XLSX.write方法将工作簿转换为二进制字符串，进一步转换为 Blob 对象，并使用saveAs函数实现文件下载。

四、使用 xlsx-js-style 添加样式

如果希望导出的 Excel 文件具有样式，我们可以使用 js-xlsx-style 库。

// 需要安装xlsx库
npm install xlsx-js-style;// 导入
import XLSX from 'xlsx-js-style';// 具体使用。
// 直接导出HTML表格
exportTableAsExcel() {
// 不需要样式直接导出// const table = document.querySelector('.el-table');// const wb = XLSX.utils.table_to_book(table, { raw: true });// XLSX.writeFile(wb, `导出.xlsx`);// 样式处理后导出// 1. 把 HTML 表格转为 workbookconst tables = document.querySelectorAll('.el-table');// 2. 新建一个 workbookconst wb = XLSX.utils.book_new();// 3. 遍历每个 table，生成对应的 sheet 并追加到 workbooktables.forEach((tableEl, idx) => {// 将 HTML table 转为 sheetconst ws = XLSX.utils.table_to_sheet(tableEl, { raw: true })// 设置列宽（wch: 字符宽度，或 wpx: 像素宽度）ws['!cols'] = [{ wch: 6 },  { wch: 30 },  { wch: 30 }, { wch: 8 }, { wch: 8 }, { wch: 20 },  { wch: 20 }, ]// 全表居中对齐Object.keys(ws).forEach(addr => {if (addr[0] === '!') returnconst cell = ws[addr]if (!cell.s) cell.s = {}cell.s.alignment = { horizontal: 'center', vertical: 'center' }})const sheetName = `第${idx + 1}导出`XLSX.utils.book_append_sheet(wb, ws, sheetName)})// 5. 写文件const filename = `导出.xlsx`XLSX.writeFile(wb, filename)
},

在上述代码中，导出表格上的所有数据，我们通过定义对象设置了居中对齐等样式，并将该样式应用到每一列中。

五、优化与注意事项

数据量较大时的性能优化：当导出的数据量较大时，可能会导致页面卡顿甚至浏览器崩溃。可以采用分页导出的方式，将数据分批处理和导出；或者在导出前对数据进行压缩处理，减小文件大小。
兼容性处理：虽然上述库在大多数现代浏览器中都能良好运行，但仍需考虑一些低版本浏览器的兼容性问题。可以使用 polyfill 等工具来解决兼容性问题，或者在项目中进行针对性的测试和优化。
文件命名规范：根据业务需求，合理设置导出文件的名称，最好包含时间、数据类型等关键信息，方便用户识别和管理文件。

个人博客：前端Excel导出

一、Excel 导出的常见场景​

二、实现 Excel 导出的依赖库选择​

三、使用 SheetJS 实现基础 Excel 导出​

四、使用 xlsx-js-style 添加样式​

五、优化与注意事项​

相关文章：

一、Excel 导出的常见场景

二、实现 Excel 导出的依赖库选择

三、使用 SheetJS 实现基础 Excel 导出

四、使用 xlsx-js-style 添加样式

五、优化与注意事项