uniapp 各端文件预览问题

解决混合开发各端文件的预览问题

一、方案一

使用 小程序的api wx.openDocument(Object object)

• 先使用 downFile 下载到微信小程序本地的 暂存文件
• 再使用 openDocument 进行预览

wx.downloadFile({
  // 示例 url，并非真实存在
  url: 'http://example.com/somefile.pdf',
  success: function (res) {
    const filePath = res.tempFilePath
    wx.openDocument({
      filePath: filePath,
      fileType: 'pdf'
      success: function (res) {
        console.log('打开文档成功')
      }
    })
  }
})

❗发现在小程序开发者工具中进行操作文件预览，文件会被PC的本地应用打开，不是在小程序新开页打开

真机预览可以🉑

各端	效果	问题
小程序	真机预览ok	不能进行自定义navigationBarTitleText
h5	会下载该文件
安卓	待测
ios	待测

二、方案二

使用 web-view

上面文字链接是uniapp的文档，较为详细。

web-view 是一个 web 浏览器组件，可以用来承载网页的容器，会自动铺满整个页面

这个可以

各端	效果	问题	解决方案
小程序	可以	预览页不可自定义
h5	可以	预览页不可自定义
安卓	安卓直接下载PDF文件	预览页不可自定义	可以使用 条件编译， 使用方案一
ios	可以	预览页不可自定义

三、方案三

// todo