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

纯前端使用ExcelJS插件导出Excel

news 2025/8/5 8:02:32

需求背景：antd表格table纯前端页面导出表格数据

官网地址： https://github.com/exceljs/exceljs

介绍ExcelJS及其应用场景

简要说明ExcelJS的功能和在前端开发中的常见用途，如动态生成报表、导出数据等。

环境配置与安装

列出所需的依赖项，包括ExcelJS库的安装方式（npm或CDN引入）。
示例命令：

npm install exceljs

基本导出流程

创建一个新的工作簿（Workbook），添加工作表（Worksheet），填充数据并导出为Excel文件。
示例代码：

const ExcelJS = require('exceljs');
//创建工作簿和工作表
const workbook = new ExcelJS.Workbook();
const worksheet = workbook.addWorksheet('Sheet1');//创建工作表的表头
//getColunm().value是表格表头数据: [{width:50,title:'序号'}, {width:50,title:'姓名'}]
const columnsData = getColunm().value.map((column, index) =>{
const width = column.width;
return {header: column.title,width: isNaN(width) ? 20: width/ 10,
}
worksheet.columns = columnsData;

高级功能：样式与格式

介绍如何设置单元格样式（字体、颜色、边框、对齐方式等）。
示例代码：

//设置样式(文本垂直横向居中)
const headerRow = Worksheet.getRow(1);
headerRow._cells.forEach((cell) => {worksheet.getCell(cell._address).font = {family: 4,size: 10,bold:true,}
worksheet.getCell(cell._address).alignment = {vertical: 'middle', horizontal: 'center'};
})//官网文档单个单元格设置样式
worksheet.getCell('A1').font = { bold: true, color: { argb: 'FF0000' } };
worksheet.getCell('A1').alignment = { vertical: 'middle', horizontal: 'center' };

最重要的：插入填充数据

//填充数据
//resData.value是后端返回的数据
resData.value.forEach(v, i) =>[//前俩列是固定的，从第三列开始const keyvalue = ref([]);for (const key in v) {keyValue.value.push(v[key]);}//循环拿到数组对象插入数据worksheet.addRow(keyValue.value);
};//获取每列数据，依次垂直居中对齐
worksheet.columns.forEach((column) =>{column.alignment = {vertical: 'middle',horizontal: 'center'};
};//addRow插入，先插入第一行表头name和age，再次就是插入数据
worksheet.addRow(['Name', 'Age']);
worksheet.addRow(['Alice', 25]);

浏览器端导出与兼容性

介绍如何在浏览器中使用ExcelJS生成并下载Excel文件，兼容性问题及解决方案。
示例代码：

workbook.xlsx.writeBuffer().then(function (buffer){const blob = new Blob([buffer], { type: 'application/octet-stream'})// 下载 Excel 文件const filename= "下载的文件名.xlsx";if (typeof window.navigator.msSaveBlob !== 'undefined'){//兼容I浏览器window.navigator.msSaveBlob(blob, filename);} else {//其他浏览器const url = window.URL.createObjectURL(blob);const link = document.createElement('a');link.href = url;link.setAttribute('download',filename);document.body.appendChild(1ink);link.click();document.body.removeChild(1ink);}}).catch(e) => {console.log('err', e);}

最后如图：