微信小程序里在线预览PDF

最近接了一个需求，小程序里预览pdf。接口返回就是一个pdf的文件地址。

因为原始框架为uni-app,所以下面示例代码也以uni-app为准。wx对应的api自行查找。 第一想到的就是写一个html页面渲染pdf，然后小程序使用webview来加载页面。后来发现webview可以直接加载pdf。

页面代码：

<web-view
      allow="allow-same-origin allow-scripts allow-popups allow-forms"
      :src="options.url"
      width="800px"
      height="100%"
></web-view>

这种方式写了之后发现安卓打不开。

然后查了一下在线预览需要先下载在预览。不需要区分ios还是安卓。但是考虑到需要保留一部分的设计，所以我决定只对安卓提供下载预览的功能。代码如下：

uni.getSystemInfo({
  // 获取平台信息
    success: function(sys) {
      const { platform } = sys;
      if(platform == 'android'){
         uni.downloadFile({
            url,
            success: function(res) {
              const { tempFilePath } = res;
                uni.openDocument({
                    filePath: tempFilePath,
                    success: function(res) {
                        console.log('打开文档成功', res)
                    },
                    fail: function() {
                        uni.showToast({
                            title: '打开文件失败',
                            icon: 'none',
                            duration: 2000
                        });
                    }
                })
            },
            fail:function(error){
                uni.showToast({
                    title: '下载文件失败',
                    icon: 'none',
                    duration: 2000
                });
            }
         });
      }else{
        // ios 此处是webview
      }
    }
 })

也可以选择不管任何平台都先下载再预览。页面的UI不能自定义。 以上。

写到这里的时候，同事问我为什么代码里有这么多括号，我告诉她，连代码都是成对出现的。你懂了吗。