uniapp 预览文件(pdf等)

2,345 阅读1分钟

在微信中点击一个PDF 或是 word 文件的时候,会自动打开一个新的页面,页面的标题是当前文件的名称,并且右上角带有分享、转发等功能。

这种效果不需要单独开发一个页面来实现,只需要调用微信或者 uniapp 相关的 API 就可预览效果了

uni.opendocument

opendocument 支持在新开页面打开文档,一般会结合 uni.downloadFile 一起使用

有时会出现照官方文档操作但还是报错的情况,虽然文档中没有要求必传 fileType 这个字段,但添加 fileType 可以解决预览报错的问题。

uni.downloadFile({
  url: 'https://xxx.pdf',
  success: function (res) {
    var filePath = res.tempFilePath;
    uni.openDcument({
      filePath: filePath,
      showMenu: true,
      success: function (res) {
      }
    });
  }
});

转发分享

如果打开预览后,未出现分享功能,添加如下属性:

showMenu :右上角是否有可以转发分享的功能,默认值为否

各平台支持情况: image.png

功能调试

H5 会在浏览器新页签中直接打开预览,zip 文件会直接下载。如果在微信开发者这工具中调试,需要在真机中调试具体的效果