1. 项目背景与核心挑战在SAP UI5应用开发中表格数据导出到Excel是个高频需求。当应用使用OData服务时可以直接利用SAP提供的标准导出功能。但现实开发中我们常遇到这些场景前端使用JSONModel临时存储处理后的数据需要导出的数据来自多个OData服务组合开发阶段后端服务尚未就绪需要导出经过前端计算/转换后的数据这时传统的OData导出方案就失效了。上周我接手的一个采购分析报表项目就遇到这个问题需要将多个系统的采购数据在前端聚合后导出但后端短时间内无法提供统一OData服务。2. 技术方案选型分析2.1 常见导出方案对比方案优点缺点适用场景OData标准导出开箱即用支持分页数据依赖后端服务纯OData场景UI5电子表格库功能强大格式丰富代码量大学习成本高复杂格式导出SheetJS轻量级纯前端实现需要处理SAP UI5适配通用导出需求CSV拼接实现简单格式单一无样式快速验证场景2.2 推荐方案SheetJS UI5适配层经过对比测试我最终选择SheetJS方案原因在于纯前端实现不依赖后端服务支持xlsx完整格式比CSV更专业社区活跃企业级应用验证仅需引入单个js文件约200KB3. 完整实现步骤3.1 环境准备首先在项目中引入SheetJS库。推荐使用CDN方式script srchttps://cdn.jsdelivr.net/npm/xlsx0.18.5/dist/xlsx.full.min.js/script如果使用UI5 Toolchain可以通过npm安装npm install xlsx types/xlsx --save-dev3.2 数据获取与转换关键步骤是将UI5表格绑定的JSONModel数据转换为SheetJS需要的格式function getTableData() { const oTable this.getView().byId(idProductsTable); const aItems oTable.getBinding(items).getCurrentContexts(); return aItems.map(oContext { // 获取每行数据 const oData oContext.getObject(); // 转换日期等特殊格式 return { Material: oData.ProductId, Description: oData.Name, Price: oData.Price.toFixed(2), Currency: oData.Currency, Stock: oData.StockQuantity }; }); }3.3 构建Excel工作簿function exportToExcel() { // 1. 获取表格数据 const aData this.getTableData(); // 2. 创建工作簿 const wb XLSX.utils.book_new(); const ws XLSX.utils.json_to_sheet(aData); // 3. 设置列宽可选 ws[!cols] [ {wch: 10}, // Material列宽 {wch: 25}, // Description列宽 {wch: 8}, // Price列宽 {wch: 8}, // Currency列宽 {wch: 8} // Stock列宽 ]; // 4. 添加工作表到工作簿 XLSX.utils.book_append_sheet(wb, ws, Products); // 5. 生成文件并下载 XLSX.writeFile(wb, Product_Export.xlsx); }4. 高级功能实现4.1 多Sheet导出对于需要分页导出的场景function exportMultiSheet() { const wb XLSX.utils.book_new(); // 第一页汇总数据 const wsSummary XLSX.utils.json_to_sheet(this.getSummaryData()); XLSX.utils.book_append_sheet(wb, wsSummary, Summary); // 第二页明细数据 const wsDetails XLSX.utils.json_to_sheet(this.getDetailData()); XLSX.utils.book_append_sheet(wb, wsDetails, Details); XLSX.writeFile(wb, Multi_Sheet_Export.xlsx); }4.2 样式定制通过修改单元格对象添加样式// 在json_to_sheet后添加表头样式 const ws XLSX.utils.json_to_sheet(aData); // 设置表头背景色 for(let col in ws) { if(col.startsWith(A1) || col.startsWith(B1) /*...*/) { ws[col].s { fill: {fgColor: {rgb: FF0070C0}}, font: {color: {rgb: FFFFFFFF}, bold: true} }; } }5. 性能优化技巧5.1 大数据量分块处理当数据量超过1万条时function exportLargeData() { const chunkSize 5000; const wb XLSX.utils.book_new(); // 分块处理 for(let i 0; i totalRecords; i chunkSize) { const chunkData this.getDataChunk(i, chunkSize); const ws XLSX.utils.json_to_sheet(chunkData); XLSX.utils.book_append_sheet(wb, ws, Data_${i/chunkSize1}); } XLSX.writeFile(wb, Large_Data_Export.xlsx); }5.2 Web Worker异步处理创建worker.jsself.importScripts(xlsx.full.min.js); self.onmessage function(e) { const {data, fileName} e.data; const wb XLSX.utils.book_new(); const ws XLSX.utils.json_to_sheet(data); XLSX.utils.book_append_sheet(wb, ws, Data); const excelBuffer XLSX.write(wb, {type: array}); self.postMessage({buffer: excelBuffer, fileName}); };主线程调用const worker new Worker(worker.js); worker.postMessage({data: aData, fileName: Async_Export.xlsx}); worker.onmessage function(e) { const blob new Blob([e.data.buffer], {type: application/octet-stream}); saveAs(blob, e.data.fileName); };6. 常见问题解决方案6.1 中文乱码问题解决方案1在HTML添加meta标签meta http-equivContent-Type contenttext/html; charsetutf-8 /解决方案2使用TextEncoderconst encoder new TextEncoder(); const encodedData encoder.encode(JSON.stringify(aData));6.2 日期格式处理最佳实践是在转换时统一格式化function formatDate(sapDate) { // SAP日期格式如/Date(1630454400000)/ const timestamp parseInt(sapDate.match(/\d/)[0]); return new Date(timestamp).toISOString().split(T)[0]; }6.3 浏览器兼容性针对IE11的特殊处理if(window.navigator.msSaveBlob) { // IE11专用方式 const blob new Blob([excelBuffer], {type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet}); window.navigator.msSaveBlob(blob, fileName); } else { // 标准方式 XLSX.writeFile(wb, fileName); }7. 完整示例代码sap.ui.define([ sap/ui/core/mvc/Controller, sap/m/MessageToast, xlsx // 确保xlsx已正确加载 ], function(Controller, MessageToast, XLSX) { use strict; return Controller.extend(com.demo.ExcelExport, { onExportPress: function() { try { // 1. 获取表格数据 const aData this.getTableData(); // 2. 创建工作簿 const wb XLSX.utils.book_new(); const ws XLSX.utils.json_to_sheet(aData); // 3. 设置样式 this._applyStyles(ws, aData); // 4. 添加工作表 XLSX.utils.book_append_sheet(wb, ws, Export); // 5. 导出文件 XLSX.writeFile(wb, Export_${new Date().toISOString().slice(0,10)}.xlsx); MessageToast.show(导出成功); } catch (err) { MessageToast.show(导出失败: err.message); } }, getTableData: function() { const oTable this.getView().byId(idProductsTable); const aContexts oTable.getBinding(items).getCurrentContexts(); return aContexts.map(oContext { const oData oContext.getObject(); return { 物料编号: oData.ProductId, 物料描述: oData.Name, 单价: oData.Price.toFixed(2), 货币: oData.Currency, 库存: oData.StockQuantity, 最后更新: this._formatDate(oData.LastUpdated) }; }); }, _formatDate: function(sapDate) { if(!sapDate) return ; const timestamp parseInt(sapDate.match(/\d/)[0]); return new Date(timestamp).toLocaleDateString(); }, _applyStyles: function(ws, aData) { // 设置列宽 ws[!cols] [ {wch: 12}, {wch: 25}, {wch: 10}, {wch: 8}, {wch: 8}, {wch: 12} ]; // 设置表头样式 const headerCells [A1, B1, C1, D1, E1, F1]; headerCells.forEach(cell { if(ws[cell]) { ws[cell].s { fill: {fgColor: {rgb: FF2E75B5}}, font: {color: {rgb: FFFFFFFF}, bold: true}, alignment: {horizontal: center} }; } }); // 设置数字列右对齐 for(let i 2; i aData.length 1; i) { [C, E].forEach(col { const cell col i; if(ws[cell]) { ws[cell].s ws[cell].s || {}; ws[cell].s.alignment {horizontal: right}; } }); } } }); });8. 扩展思考在实际项目中我们可以进一步优化这个方案导出模板化预定义Excel模板只填充数据部分保持企业统一风格后端混合方案前端准备数据通过Blob上传到后端生成最终文件离线导出结合IndexedDB实现离线数据导出能力进度提示对于大数据量导出添加进度条提示这个方案在我最近三个SAP Fiori项目中稳定运行最高支持过单次导出8万条记录。关键是要处理好数据分块和内存管理避免浏览器卡死。
1. 项目背景与核心挑战在SAP UI5应用开发中表格数据导出到Excel是个高频需求。当应用使用OData服务时可以直接利用SAP提供的标准导出功能。但现实开发中我们常遇到这些场景前端使用JSONModel临时存储处理后的数据需要导出的数据来自多个OData服务组合开发阶段后端服务尚未就绪需要导出经过前端计算/转换后的数据这时传统的OData导出方案就失效了。上周我接手的一个采购分析报表项目就遇到这个问题需要将多个系统的采购数据在前端聚合后导出但后端短时间内无法提供统一OData服务。2. 技术方案选型分析2.1 常见导出方案对比方案优点缺点适用场景OData标准导出开箱即用支持分页数据依赖后端服务纯OData场景UI5电子表格库功能强大格式丰富代码量大学习成本高复杂格式导出SheetJS轻量级纯前端实现需要处理SAP UI5适配通用导出需求CSV拼接实现简单格式单一无样式快速验证场景2.2 推荐方案SheetJS UI5适配层经过对比测试我最终选择SheetJS方案原因在于纯前端实现不依赖后端服务支持xlsx完整格式比CSV更专业社区活跃企业级应用验证仅需引入单个js文件约200KB3. 完整实现步骤3.1 环境准备首先在项目中引入SheetJS库。推荐使用CDN方式script srchttps://cdn.jsdelivr.net/npm/xlsx0.18.5/dist/xlsx.full.min.js/script如果使用UI5 Toolchain可以通过npm安装npm install xlsx types/xlsx --save-dev3.2 数据获取与转换关键步骤是将UI5表格绑定的JSONModel数据转换为SheetJS需要的格式function getTableData() { const oTable this.getView().byId(idProductsTable); const aItems oTable.getBinding(items).getCurrentContexts(); return aItems.map(oContext { // 获取每行数据 const oData oContext.getObject(); // 转换日期等特殊格式 return { Material: oData.ProductId, Description: oData.Name, Price: oData.Price.toFixed(2), Currency: oData.Currency, Stock: oData.StockQuantity }; }); }3.3 构建Excel工作簿function exportToExcel() { // 1. 获取表格数据 const aData this.getTableData(); // 2. 创建工作簿 const wb XLSX.utils.book_new(); const ws XLSX.utils.json_to_sheet(aData); // 3. 设置列宽可选 ws[!cols] [ {wch: 10}, // Material列宽 {wch: 25}, // Description列宽 {wch: 8}, // Price列宽 {wch: 8}, // Currency列宽 {wch: 8} // Stock列宽 ]; // 4. 添加工作表到工作簿 XLSX.utils.book_append_sheet(wb, ws, Products); // 5. 生成文件并下载 XLSX.writeFile(wb, Product_Export.xlsx); }4. 高级功能实现4.1 多Sheet导出对于需要分页导出的场景function exportMultiSheet() { const wb XLSX.utils.book_new(); // 第一页汇总数据 const wsSummary XLSX.utils.json_to_sheet(this.getSummaryData()); XLSX.utils.book_append_sheet(wb, wsSummary, Summary); // 第二页明细数据 const wsDetails XLSX.utils.json_to_sheet(this.getDetailData()); XLSX.utils.book_append_sheet(wb, wsDetails, Details); XLSX.writeFile(wb, Multi_Sheet_Export.xlsx); }4.2 样式定制通过修改单元格对象添加样式// 在json_to_sheet后添加表头样式 const ws XLSX.utils.json_to_sheet(aData); // 设置表头背景色 for(let col in ws) { if(col.startsWith(A1) || col.startsWith(B1) /*...*/) { ws[col].s { fill: {fgColor: {rgb: FF0070C0}}, font: {color: {rgb: FFFFFFFF}, bold: true} }; } }5. 性能优化技巧5.1 大数据量分块处理当数据量超过1万条时function exportLargeData() { const chunkSize 5000; const wb XLSX.utils.book_new(); // 分块处理 for(let i 0; i totalRecords; i chunkSize) { const chunkData this.getDataChunk(i, chunkSize); const ws XLSX.utils.json_to_sheet(chunkData); XLSX.utils.book_append_sheet(wb, ws, Data_${i/chunkSize1}); } XLSX.writeFile(wb, Large_Data_Export.xlsx); }5.2 Web Worker异步处理创建worker.jsself.importScripts(xlsx.full.min.js); self.onmessage function(e) { const {data, fileName} e.data; const wb XLSX.utils.book_new(); const ws XLSX.utils.json_to_sheet(data); XLSX.utils.book_append_sheet(wb, ws, Data); const excelBuffer XLSX.write(wb, {type: array}); self.postMessage({buffer: excelBuffer, fileName}); };主线程调用const worker new Worker(worker.js); worker.postMessage({data: aData, fileName: Async_Export.xlsx}); worker.onmessage function(e) { const blob new Blob([e.data.buffer], {type: application/octet-stream}); saveAs(blob, e.data.fileName); };6. 常见问题解决方案6.1 中文乱码问题解决方案1在HTML添加meta标签meta http-equivContent-Type contenttext/html; charsetutf-8 /解决方案2使用TextEncoderconst encoder new TextEncoder(); const encodedData encoder.encode(JSON.stringify(aData));6.2 日期格式处理最佳实践是在转换时统一格式化function formatDate(sapDate) { // SAP日期格式如/Date(1630454400000)/ const timestamp parseInt(sapDate.match(/\d/)[0]); return new Date(timestamp).toISOString().split(T)[0]; }6.3 浏览器兼容性针对IE11的特殊处理if(window.navigator.msSaveBlob) { // IE11专用方式 const blob new Blob([excelBuffer], {type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet}); window.navigator.msSaveBlob(blob, fileName); } else { // 标准方式 XLSX.writeFile(wb, fileName); }7. 完整示例代码sap.ui.define([ sap/ui/core/mvc/Controller, sap/m/MessageToast, xlsx // 确保xlsx已正确加载 ], function(Controller, MessageToast, XLSX) { use strict; return Controller.extend(com.demo.ExcelExport, { onExportPress: function() { try { // 1. 获取表格数据 const aData this.getTableData(); // 2. 创建工作簿 const wb XLSX.utils.book_new(); const ws XLSX.utils.json_to_sheet(aData); // 3. 设置样式 this._applyStyles(ws, aData); // 4. 添加工作表 XLSX.utils.book_append_sheet(wb, ws, Export); // 5. 导出文件 XLSX.writeFile(wb, Export_${new Date().toISOString().slice(0,10)}.xlsx); MessageToast.show(导出成功); } catch (err) { MessageToast.show(导出失败: err.message); } }, getTableData: function() { const oTable this.getView().byId(idProductsTable); const aContexts oTable.getBinding(items).getCurrentContexts(); return aContexts.map(oContext { const oData oContext.getObject(); return { 物料编号: oData.ProductId, 物料描述: oData.Name, 单价: oData.Price.toFixed(2), 货币: oData.Currency, 库存: oData.StockQuantity, 最后更新: this._formatDate(oData.LastUpdated) }; }); }, _formatDate: function(sapDate) { if(!sapDate) return ; const timestamp parseInt(sapDate.match(/\d/)[0]); return new Date(timestamp).toLocaleDateString(); }, _applyStyles: function(ws, aData) { // 设置列宽 ws[!cols] [ {wch: 12}, {wch: 25}, {wch: 10}, {wch: 8}, {wch: 8}, {wch: 12} ]; // 设置表头样式 const headerCells [A1, B1, C1, D1, E1, F1]; headerCells.forEach(cell { if(ws[cell]) { ws[cell].s { fill: {fgColor: {rgb: FF2E75B5}}, font: {color: {rgb: FFFFFFFF}, bold: true}, alignment: {horizontal: center} }; } }); // 设置数字列右对齐 for(let i 2; i aData.length 1; i) { [C, E].forEach(col { const cell col i; if(ws[cell]) { ws[cell].s ws[cell].s || {}; ws[cell].s.alignment {horizontal: right}; } }); } } }); });8. 扩展思考在实际项目中我们可以进一步优化这个方案导出模板化预定义Excel模板只填充数据部分保持企业统一风格后端混合方案前端准备数据通过Blob上传到后端生成最终文件离线导出结合IndexedDB实现离线数据导出能力进度提示对于大数据量导出添加进度条提示这个方案在我最近三个SAP Fiori项目中稳定运行最高支持过单次导出8万条记录。关键是要处理好数据分块和内存管理避免浏览器卡死。
