Kendo Vue 多表格数据导出至单个 Excel 文件（多工作表）

本文详解如何使用 kendo vue excel 导出组件，将多个 grid 表格数据合并导出为一个 excel 文件，并为每张表格自动分配独立工作表（sheet），涵盖核心 api 调用、工作表合并逻辑与关键注意事项。

本文详解如何使用 kendo vue excel 导出组件，将多个 grid 表格数据合并导出为一个 excel 文件，并为每张表格自动分配独立工作表（sheet），涵盖核心 api 调用、工作表合并逻辑与关键注意事项。

在企业级 Vue 应用中，常需将多个业务模块的表格数据（如订单列表、用户统计、库存明细、销售趋势）统一导出为一份结构清晰的 Excel 报表。Kendo Vue 提供了 @progress/kendo-vue-excel-export 与 @progress/kendo-file-saver 组合方案，原生支持多工作表导出——其核心在于复用 workbookOptions 构建单个工作簿（Workbook），再通过手动合并 sheets 数组实现多表整合，而非调用多次 saveExcel（后者会生成多个独立文件）。

✅ 正确实现步骤

1. 安装并导入必要模块
   确保已安装对应依赖：

   npm install @progress/kendo-vue-excel-export @progress/kendo-file-saver

   在组件中导入：

   

   Machine Translation

   聚合多个来源的AI翻译

   下载

   import { saveExcel, workbookOptions, toDataURL } from "@progress/kendo-vue-excel-export";
   import { saveAs } from "@progress/kendo-file-saver";

2. 构建多工作表 Workbook 对象
   关键逻辑：仅调用一次 workbookOptions() 初始化主工作簿，其余表格通过 workbookOptions() 分别生成独立 sheet 配置，再将其 sheets[0] 推入主工作簿的 sheets 数组：

   customSaveExcel(exportOptions) {
     const saveFn = (dataURL) => saveAs(dataURL, `${exportOptions.fileName}.xlsx`);
   
     // 主工作簿（第一张表）
     const firstTable = workbookOptions({
       data: exportOptions.data,
       columns: exportOptions.columns,
       // 注意：fileName 在 workbookOptions 中不生效，仅用于最终 saveAs
     });
   
     // 后续表格均构造为独立 sheet 配置
     const secondTable = workbookOptions({
       data: this.second_table_data,
       columns: this.second_table_column,
     });
   
     const thirdTable = workbookOptions({
       data: this.third_table_data,
       columns: this.third_table_column,
     });
   
     const fourthTable = workbookOptions({
       data: this.fourth_table_data,
       columns: this.fourth_table_column,
     });
   
     // 【核心】将其他 sheet 追加到主工作簿
     firstTable.sheets.push(secondTable.sheets[0]);
     firstTable.sheets.push(thirdTable.sheets[0]);
     firstTable.sheets.push(fourthTable.sheets[0]);
   
     // 触发导出
     toDataURL(firstTable).then(saveFn);
   }

3. 触发导出（示例）
   在按钮点击事件中传入首张表的数据与列配置：

   <button @click="allTableDataExport({
     data: this.first_table_data,
     columns: this.first_table_columns
   })">
     导出全部表格（4 个工作表）
   </button>

⚠️ 注意事项与最佳实践

• fileName 参数仅对 saveAs 有效：workbookOptions 的 fileName 属性会被忽略，务必在 saveAs(dataURL, 'xxx.xlsx') 中指定完整文件名及 .xlsx 后缀。
• 列配置一致性：各 columns 数组需明确定义 field、title 和可选的 width，否则表头可能缺失或错位。建议统一管理列配置对象。
• 数据格式要求：data 必须为数组（如 [{id: 1, name: 'A'}, ...]），不支持嵌套对象或 Promise；若含异步数据，请先 await 解析完成再调用导出。
• 性能提示：单文件超过 10 万行或 5 张以上工作表时，建议添加加载状态提示，并考虑分页导出策略。
• 样式限制：Kendo Vue Excel 导出默认不支持单元格合并、条件格式等高级样式；如需定制，需借助 toDataURL 返回的 Workbook 实例手动操作 sheets[i].rows[j].cells[k] 属性（详见 Kendo Workbook API）。

通过上述方式，你即可在 Kendo Vue 项目中稳健实现「一文件、多表格、一分离工作表」的专业级 Excel 导出能力，兼顾可维护性与用户体验。