如何使用ReactJS导出保留UI且可编辑的账单页面为Excel文件

要实现导出的Excel既还原预览界面的UI设计，又保持字段可编辑，核心是直接构建结构化的Excel数据并配置单元格样式，而非转成静态图片。以下是具体实现方案：

核心思路 #

放弃图片导出方案，转而通过Excel操作库直接生成带样式的可编辑表格：

• 将账单的每个字段映射为Excel的单元格数据（确保数据可编辑）
• 用库提供的API配置单元格样式（字体、颜色、对齐、边框、合并单元格等），还原预览界面的UI

推荐工具库 #

优先选择exceljs，它支持完整的单元格样式设置、合并单元格、数据类型定义，API更直观易维护。

具体实现步骤 #

1. 安装依赖 #

npm install exceljs file-saver

（file-saver用于在浏览器中触发文件下载）

2. 编写导出逻辑 #

假设你的账单数据结构如下：

const billData = {
  title: "2024年5月服务费账单",
  customer: {
    name: "XX科技有限公司",
    address: "北京市朝阳区XX大厦",
    contact: "138XXXXXXX"
  },
  items: [
    { desc: "云服务器租赁", quantity: 2, unitPrice: 1500, total: 3000 },
    { desc: "技术支持服务", quantity: 1, unitPrice: 2000, total: 2000 }
  ],
  totalAmount: 5000,
  issueDate: "2024-05-30"
};

导出函数示例：

import ExcelJS from 'exceljs';
import { saveAs } from 'file-saver';

export const exportBillToExcel = async (billData) => {
  // 创建工作簿和工作表
  const workbook = new ExcelJS.Workbook();
  const worksheet = workbook.addWorksheet('账单');

  // 1. 设置标题行（合并单元格+样式）
  worksheet.mergeCells('A1:E1');
  const titleCell = worksheet.getCell('A1');
  titleCell.value = billData.title;
  titleCell.font = { name: '微软雅黑', size: 16, bold: true };
  titleCell.alignment = { horizontal: 'center', vertical: 'middle' };
  titleCell.fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FFE6F3FF' } };

  // 2. 填充客户信息
  worksheet.getCell('A2').value = '客户名称：';
  worksheet.getCell('A2').font = { bold: true };
  worksheet.getCell('B2').value = billData.customer.name;

  worksheet.getCell('A3').value = '联系地址：';
  worksheet.getCell('A3').font = { bold: true };
  worksheet.getCell('B3').value = billData.customer.address;

  worksheet.getCell('A4').value = '联系电话：';
  worksheet.getCell('A4').font = { bold: true };
  worksheet.getCell('B4').value = billData.customer.contact;

  // 3. 设置明细表头
  const headerRow = worksheet.getRow(6);
  headerRow.values = ['序号', '服务项目', '数量', '单价', '小计'];
  headerRow.eachCell(cell => {
    cell.font = { bold: true };
    cell.alignment = { horizontal: 'center' };
    cell.border = {
      top: { style: 'thin' },
      left: { style: 'thin' },
      bottom: { style: 'thin' },
      right: { style: 'thin' }
    };
    cell.fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FFD9E8F5' } };
  });

  // 4. 填充明细数据
  billData.items.forEach((item, index) => {
    const row = worksheet.getRow(7 + index);
    row.values = [index + 1, item.desc, item.quantity, item.unitPrice, item.total];
    // 设置单元格边框
    row.eachCell(cell => {
      cell.border = {
        top: { style: 'thin' },
        left: { style: 'thin' },
        bottom: { style: 'thin' },
        right: { style: 'thin' }
      };
    });
    // 金额列右对齐
    row.getCell(4).alignment = { horizontal: 'right' };
    row.getCell(5).alignment = { horizontal: 'right' };
  });

  // 5. 设置总计行
  const totalRow = worksheet.getRow(7 + billData.items.length);
  totalRow.mergeCells('A' + totalRow.number + ':D' + totalRow.number);
  totalRow.getCell('A').value = '总计：';
  totalRow.getCell('A').font = { bold: true };
  totalRow.getCell('A').alignment = { horizontal: 'right' };
  totalRow.getCell('E').value = billData.totalAmount;
  totalRow.getCell('E').font = { bold: true, color: { argb: 'FFFF0000' } };
  totalRow.getCell('E').alignment = { horizontal: 'right' };

  // 6. 设置列宽
  worksheet.columns = [
    { width: 8 },
    { width: 25 },
    { width: 8 },
    { width: 12 },
    { width: 12 }
  ];

  // 生成文件并下载
  const buffer = await workbook.xlsx.writeBuffer();
  const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
  saveAs(blob, `${billData.title}.xlsx`);
};

3. 在React组件中调用 #

在预览界面的导出按钮点击事件中调用该函数即可：

<button onClick={() => exportBillToExcel(billData)}>导出可编辑Excel</button>

关键注意事项 #

• UI还原细节：如果预览界面有更复杂的样式（比如特定背景色、字体、边框样式），可以通过exceljs的font、fill、border等属性逐一对应配置
• 数据类型：确保金额、日期等字段设置正确的数据类型（比如Excel的数值型、日期型），这样导出后既能编辑又能正常计算
• 合并单元格：对于跨列的标题或汇总项，使用mergeCells方法实现，和预览界面保持一致

内容的提问来源于stack exchange，提问作者Nitesh Gairola