使用ExcelJS实现Excel数据报表导出的完整指南_vue.js

在开始技术细节前，让我们建立直观认知 - 每个ExcelJS操作对应Excel软件中的什么操作：

const workbook = new ExcelJS.Workbook();

相当于：双击打开一个全新的Excel文件

worksheet.pageSetup = { orientation: 'landscape' // 横向};

相当于：页面布局 → 纸张方向 → 横向

cell 是通过工作表(Worksheet)对象获取的特定单元格引用。通俗来讲：在这里cell就是你 选中工作表中的哪些部分 ，选中之后就可以 对选中的部分设置样式 了。

cell.font = { name: '微软雅黑', size: 12};

相当于：右键单元格 → 设置单元格格式 → 字体选项卡

cell.border = { top: { style: 'double' }};

相当于：开始 → 边框 → 其他边框 → 选择上边框线型

这里可能就是有人要问了，你的cell（单元格）是哪里来的呐？接下来告诉你真相：

(1) 通过行列坐标直接获取

const cell = worksheet.getCell('B3'); // 相当于在Excel中点击B3单元格

或

const cell = worksheet.getCell(3, 2); // 行号3，列号2（即B3）

(2) 通过行对象获取

const row = worksheet.getRow(3); // 获取第3行const cell = row.getCell(2); // 获取该行第2列的单元格

(3) 添加行时直接操作

worksheet.addRow([10, '张三']).eachCell((cell, colNumber) => { if(colNumber === 2) { // 第二列 cell.font = { name: '微软雅黑', size: 12 }; }});

worksheet.addConditionalFormatting({ ref: 'A1:A10', rules: [{ type: 'cellIs', operator: 'greaterThan', formulae: [100], style: { fill: { type: 'solid', fgColor: { argb: 'FFFF0000' } } } }]});

相当于：开始 → 条件格式 → 突出显示单元格规则 → 大于

worksheet.mergeCells('A1:D1');

相当于：选中A1:D1区域 → 开始 → 合并后居中

cell.border = { diagonal: { up: true }};

相当于：右键单元格 → 设置单元格格式 → 边框 → 斜线

worksheet.dataValidation.add('B2:B100', { type: 'list', formulae: ['"男,女"']});

相当于：数据 → 数据验证 → 允许"序列" → 输入"男,女"

cell.value = { formula: 'SUM(B2:C2)', result: 150 };

相当于：在单元格输入"=SUM(B2:C2)" → 按Enter显示计算结果

saveAs(new Blob([buffer]), 'report.xlsx');

相当于：文件 → 另存为 → 选择保存位置

res.setHeader('Content-Type', 'application/vnd.ms-excel');

相当于：SharePoint/OneDrive中的"下载"功能

通过这种可视化操作与代码的精确对应，开发者可以更直观地理解ExcelJS的各个API用途，从而构建出真正符合业务需求的专业报表系统。

const transformedData = response.data.list.map((item, index) => ({ 序号: index + 1, 学生姓名: item.name, 性别: item.gender === "male" ? "男" : "女", // 数据字典转换 // ...其他字段 录取时间: item.admission_time ? dayjs(item.admission_time).format("YYYY-MM-DD HH:mm:ss") : "--" // 处理空值}));

关键点：

const workbook = new ExcelJS.Workbook();const worksheet = workbook.addWorksheet("学生报名信息");

对应Excel操作：

// 合并单元格worksheet.mergeCells("A1:N1"); // 设置标题内容const titleCell = worksheet.getCell("A1");titleCell.value = `学生报名信息（${dateRange}）`;// 设置样式titleCell.font = { name: "宋体", // 对应Excel字体下拉框 size: 16, // 字号设置 bold: true // 加粗按钮};titleCell.alignment = { horizontal: "center" // 对应Excel居中按钮};

const headers = ["序号", "学生姓名", ...];const headerRow = worksheet.addRow(headers);// 样式设置headerRow.eachCell(cell => { cell.border = { top: { style: "thin" }, // 对应Excel边框工具栏 // ...其他边框 }; cell.fill = { type: "pattern", pattern: "solid", // 对应Excel油漆桶工具 fgColor: { argb: "FFD9D9D9" } };});

专业技巧：

transformedData.forEach(item => { const row = worksheet.addRow(Object.values(item)); row.eachCell((cell, colNumber) => { // 第六列（家庭住址）左对齐，其他居中 cell.alignment = { horizontal: colNumber === 6 ? "left" : "center" }; // 斑马线效果 if(row.number % 2 === 0) { cell.fill = { type: "pattern", fgColor: { argb: "FFF9F9F9" } }; } });});

性能优化：

worksheet.columns = [ { width: 6 }, // 序号列 { width: 10 }, // 姓名列 // ...其他列 { width: 30 } // 地址列（最宽）];

设计原则：

const buffer = await workbook.xlsx.writeBuffer();const blob = new Blob([buffer], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });saveAs(blob, `学生报名信息_${dateRange}.xlsx`);

关键参数：

开发时可先注释掉部分样式代码

逐步添加：先结构 → 基础样式 → 高级效果

实时查看单元格地址：

console.log(`当前处理单元格：${cell.address}`);

样式覆盖检查：

// 查看最终应用的样式console.log(cell.style);

worksheet.views = [{ state: 'frozen', ySplit: 2 // 冻结前两行（标题+表头）}];

数据验证（如性别列）：

worksheet.views = [{ state: 'frozen', ySplit: 2 // 冻结前两行（标题+表头）}];

数据验证（如性别列）：

worksheet.dataValidation.add('C3:C100', { type: 'list', formulae: ['"男,女"']});

通过这样逐步拆解，您可以看到每个代码块都对应着具体的Excel操作，就像在GUI界面中手动操作一样直观，但通过代码实现了批量和精准控制。

到此这篇关于使用ExcelJS实现Excel数据报表导出的完整指南的文章就介绍到这了,更多相关ExcelJS导出Excel内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

上一篇：Vue3中vmodel实现双向数据绑定的全面指南vu

下一篇：Vue使用element plus组件的时间格式问题解