如何为DevExtreme Data Grid的Excel导出添加标题

我之前也碰到过这个需求，DevExtreme的Data Grid确实没有直接配置导出标题的属性，但通过自定义导出逻辑完全可以实现，这里分享两种实用的方法：

方法1：手动触发导出并自定义工作簿 #

这种方式适合需要手动控制导出时机的场景，比如通过自定义按钮触发导出：

// 获取Data Grid实例
const grid = $("#yourGridId").dxDataGrid("instance");

// 自定义导出函数
async function exportWithTitle() {
  // 生成Grid对应的Excel工作簿（启用ExcelJS模式）
  const workbook = await grid.exportToExcel({
    useExcelJS: true,
    selectedRowsOnly: false, // 根据需求设置是否只导出选中行
    exportSelectedRowsOnly: false
  });

  // 获取导出的第一个工作表
  const worksheet = workbook.worksheets[0];

  // 插入标题行：在第一行添加标题文本
  worksheet.insertRow(1, ["2024年度销售数据总览"]);
  // 合并单元格（根据你的列数调整范围，比如A到H列）
  worksheet.mergeCells("A1:H1");
  
  // 设置标题样式：加粗、居中、大字号
  const titleCell = worksheet.getCell("A1");
  titleCell.font = { bold: true, size: 16 };
  titleCell.alignment = { horizontal: "center", vertical: "middle" };
  // 调整标题行高度
  worksheet.getRow(1).height = 32;

  // 将工作簿导出为Excel文件
  workbook.xlsx.writeBuffer().then(buffer => {
    saveAs(new Blob([buffer], { type: "application/octet-stream" }), "销售报表.xlsx");
  });
}

方法2：绑定Grid自带导出按钮，通过事件拦截修改 #

如果用的是Grid自带的导出按钮，可以通过onExporting事件拦截导出流程，修改工作簿内容：

$("#yourGridId").dxDataGrid({
  // 其他Grid配置...
  columns: [/* 你的列配置 */],
  dataSource: /* 你的数据源 */,
  export: {
    enabled: true,
    useExcelJS: true // 必须启用ExcelJS模式才能自定义工作簿
  },
  onExporting(e) {
    const workbook = e.workbook;
    const worksheet = workbook.worksheets[0];

    // 插入标题行
    worksheet.insertRow(1, ["月度员工绩效报表"]);
    // 合并标题单元格（根据实际列数调整）
    worksheet.mergeCells("A1:G1");
    
    // 设置标题样式
    const titleCell = worksheet.getCell("A1");
    titleCell.font = { bold: true, size: 14 };
    titleCell.alignment = { horizontal: "center" };
    worksheet.getRow(1).height = 28;

    // 不要取消导出流程，让Grid继续完成导出
    e.cancel = false;
  }
});

关键注意点 #

• 必须开启useExcelJS: true：只有使用ExcelJS模式，才能直接操作工作簿对象进行自定义修改。
• 依赖库：确保项目中已引入ExcelJS和FileSaver.js（可以通过npm安装或本地引入静态文件）。
• 单元格范围：合并单元格时，要根据你Grid的实际列数调整范围（比如你的Grid有6列，就合并A1:F1）。

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