H5实现附件预览功能（doc/docx、xls/xlsx、ppt/pptx、pdf）-Toy模板网

这篇具有很好参考价值的文章主要介绍了H5实现附件预览功能（doc/docx、xls/xlsx、ppt/pptx、pdf）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、H5用以下方式即可实现：

（钉钉小程序官方目前没有预览附件的API，也可用这种方法实现）

doc/docx、xls/xlsx、ppt/pptx可直接用以下链接打开：
注意：使用此方法，附件链接必须是域名。

https://view.officeapps.live.com/op/view.aspx?src= + 文档url

let url = "https://view.officeapps.live.com/op/view.aspx?src=" + 文档url;
//两种方式
window.open（url）;  //新建窗口打开链接预览
window.location.href = url;  //本页面内跳转链接实现预览

pdf类型附件需要另外处理，具体方法可参考我的另一篇文章：

https://blog.csdn.net/weixin_42284117/article/details/120354159

二、微信小程序预览附件用wx.downLoadFile和wx.openDocument，即可实现：

//需要用到两个api：wx.downLoadFile和wx.openDocument，先将附件转换成本地连接，再用openDocument打开
wx.downloadFile({
  // 示例 url，并非真实存在
  url: 'http://example.com/somefile.pdf',
  success: function (res) {
    const filePath = res.tempFilePath
    wx.openDocument({
      filePath: filePath,
      success: function (res) {
        console.log('打开文档成功')
      }
    })
  }
})