如何在SAPUI5 Fiori应用中无需下载预览Word和Excel文件？

方案1：使用第三方前端库直接解析渲染 #

借助成熟的前端库直接解析Office文件内容，在UI5控件中渲染预览结果，无需后端转换。

实现步骤 #

1. 引入依赖库
   将mammoth.min.js（处理Word文档）和xlsx.full.min.js（处理Excel文件）放入项目webapp/libs目录，在manifest.json的resources节点中配置资源路径：

   "resources": {
     "js": [
       { "uri": "libs/mammoth.min.js" },
       { "uri": "libs/xlsx.full.min.js" }
     ]
   }
   

2. Word文档预览示例
   在视图中添加Html控件作为预览容器：

   <Html id="wordPreviewContainer" content="" class="preview-container" />
   

   控制器中实现文件读取与转换逻辑：

   previewWordFile: function(sFileUrl) {
     fetch(sFileUrl)
       .then(res => res.arrayBuffer())
       .then(buffer => {
         mammoth.convertToHtml({ arrayBuffer: buffer })
           .then(result => {
             const oHtmlCtrl = this.getView().byId("wordPreviewContainer");
             oHtmlCtrl.setContent(result.value);
           })
           .catch(err => console.error("Word预览失败:", err));
       });
   }
   

3. Excel文件预览示例
   在视图中添加Table控件用于展示表格数据：

   <Table id="excelPreviewTable" mode="None" width="100%">
     <columns>
       <!-- 列将通过动态绑定生成 -->
     </columns>
   </Table>
   

   控制器中解析Excel并绑定数据：

   previewExcelFile: function(sFileUrl) {
     fetch(sFileUrl)
       .then(res => res.arrayBuffer())
       .then(buffer => {
         const workbook = XLSX.read(buffer, { type: "array" });
         const sheetName = workbook.SheetNames[0];
         const sheetData = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName]);
         
         const oTable = this.getView().byId("excelPreviewTable");
         oTable.setModel(new sap.ui.model.json.JSONModel({ data: sheetData }));
         
         // 动态生成列
         const columns = Object.keys(sheetData[0] || {}).map(key => 
           new sap.m.Column({ header: new sap.m.Text({ text: key }) })
         );
         oTable.setColumns(columns);
         
         // 绑定列表项
         oTable.bindItems({
           path: "/data",
           template: new sap.m.ColumnListItem({
             cells: Object.keys(sheetData[0] || {}).map(key => 
               new sap.m.Text({ text: `{${key}}` })
             )
           })
         });
       })
       .catch(err => console.error("Excel预览失败:", err));
   }
   

方案2：转换为PDF后复用现有PDF Viewer #

依赖后端将Office文件转换为PDF格式，直接使用已实现的PDF Viewer组件预览。

实现步骤 #

1. 后端接口开发
   后端基于Apache POI + iText、LibreOffice Headless等工具，开发文件转换接口，接收Office文件地址或二进制流，返回转换后的PDF文件地址。

2. 前端调用逻辑
   控制器中调用转换接口，将返回的PDF地址传入现有PDF Viewer：

   previewOfficeAsPdf: function(sFileUrl, sFileType) {
     const oModel = this.getView().getModel();
     oModel.callFunction("/ConvertOfficeToPdf", {
       method: "POST",
       urlParameters: { fileUrl: sFileUrl, type: sFileType },
       success: oData => {
         const oPdfViewer = this.getView().byId("existingPdfViewer");
         oPdfViewer.setSource(oData.pdfUrl);
         oPdfViewer.setVisible(true);
       },
       error: oErr => console.error("PDF转换失败:", oErr)
     });
   }
   

方案3：嵌入Office Online预览（限合规网络环境） #

若企业部署了Office Online Server或拥有Office 365权限，可通过iframe嵌入官方预览页面。

实现代码 #

previewWithOfficeOnline: function(sFileUrl) {
  const sPreviewUrl = `https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(sFileUrl)}`;
  const oIframe = new sap.ui.core.HTML({
    content: `<iframe src="${sPreviewUrl}" width="100%" height="800px" frameborder="0"></iframe>`
  });
  
  const oDialog = new sap.m.Dialog({
    title: "文件预览",
    content: oIframe,
    endButton: new sap.m.Button({ text: "关闭", press: () => oDialog.close() })
  });
  oDialog.open();
}

注意事项 #

• 第三方库方案需考虑大文件的解析性能，建议限制文件大小或添加加载提示。
• PDF转换方案需后端处理不同Office版本的兼容性问题。
• Office Online方案要求文件具备公网可访问权限，或企业内部部署对应服务。

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