h5应用中， 怎么实现 预览office文档 这个功能

欢迎到专业群（ uni-app 官方技术交流群 1 ） 咨询，群中有相关专业的管理员和群友。

在微信内置浏览器和手机应用App内嵌的H5场景中，实现Office文档（Word、Excel、PDF）预览主要有以下几种方案：

1. 使用uni.openDocument API（推荐用于App和小程序）

uni-app提供了uni.openDocument接口，支持打开doc、docx、xls、xlsx、ppt、pptx、pdf等格式。

使用示例：

uni.downloadFile({  
  url: 'https://example.com/document.pdf',  
  success: function (res) {  
    uni.openDocument({  
      filePath: res.tempFilePath,  
      fileType: 'pdf', // 可选，指定文件类型  
      showMenu: true,  // 是否显示分享菜单（微信小程序、支付宝小程序支持）  
      success: function (res) {  
        console.log('打开文档成功');  
      }  
    });  
  }  
});

平台差异说明：

• App iOS：在当前应用内打开
• App Android：调用系统相关应用打开（需安装WPS或Office等应用）
• H5：使用浏览器打开，依赖浏览器自身能力
• 微信小程序：在小程序入口应用内打开

2. 使用插件市场的专业预览插件

对于需要更完善预览体验的场景，推荐使用插件市场的专用插件：

• h5office插件：兼容浏览器端(H5)、iOS App端、Android App端，支持PDF、Word、PPT、Excel预览，提供权限配置（下载、拷贝文字、打印），支持双指缩放操作。

• cjx-previewOffice插件：纯前端实现，支持H5、iOS、Android预览PDF、Excel、Word、Txt文件，无需后端服务。

3. 使用web-view组件嵌入预览（适用于H5和App）

在H5页面或App的web-view中，可以通过以下方式实现：

• PDF文件：使用pdf.js开源库搭建预览页面，通过iframe加载
• Office文件：使用微软Office在线预览接口 https://view.officeapps.live.com/op/embed.aspx?src=文件地址（要求文件必须可通过互联网访问）

示例：

<web-view src="https://view.officeapps.live.com/op/embed.aspx?src=https://example.com/file.docx"></web-view>

4. App端调用第三方应用打开

在App端，下载文件后可以使用系统能力调用WPS等应用打开：

// 下载后使用系统应用打开  
plus.runtime.openFile(filePath);

注意事项：

• H5端（包括微信内置浏览器）的预览能力受限于浏览器本身，部分浏览器可能强制下载而非预览
• 微信小程序中，个人类型与海外类型小程序使用web-view需要配置域名白名单
• 如果使用微软在线预览服务，文件地址必须是公网可访问的URL
• 对于内网环境或隐私要求高的文件，建议使用插件的私有化部署版本或纯前端解析方案（如cjx-previewOffice）

如果现有方案无法满足需求，建议到插件市场搜索"pdf"或"office"查看更多专项插件。