【预览pdf】:uniapp在微信小程序预览pdf，兼容安卓/IOS

前言

提示：因最近项目需求，项目需要用uniapp来开发微信小程序预览pdf的功能, 后端以链接形式返回pdf地址。

---

一、方法概述

开始用uniapp提供微信自带方法：wx.downloadFile({ }) + wx.openDocument({ })，但发现android正常打开，IOS打不开的情况
换种方式使用： web-view，uni-app 中web-view做链接跳转，但是出现IOS可以正常打开，android打不开的情况。
综上：安卓手机用原生，ios手机用web-view

二、方法使用

1.第一种微信自带方法：

//这里的 url 就是pdf文件的路径，直接调用此方法就可以打开pdf文件
androidOpenPdf(url) {
  uni.downloadFile({
    url: url,
    success: function (res) {
      var filePath = res.tempFilePath;
      uni.openDocument({
        filePath: filePath,
        success: function (res) {
          console.log("打开文档成功");
        },
      });
    },
  });
}

2.第二种web-view打开：

这里需要新建一个页面为webView

//这里跳转web-view页面， url 就是pdf文件的路径
uni.navigateTo({
  url: "./webView/webView?contractUrl=" + this.contractUrl,
});

webView页面：

<template>
  <view id="web-info">
    <web-view :src="src"></web-view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      src: '',
    }
  },
  onLoad(option) {
    this.src = option.contractUrl
  }
}
</script>

2.结合上述两种方法为：

openPDF() {
  switch (uni.getSystemInfoSync().platform) {
    case "android":
      console.log("安卓");
      // 这里直接调用原生的方法，我们上面定义的
      this.androidOpenPdf(this.contractUrl);
      break;
    case "ios":
      console.log("IOS");
      //这里跳转web-view页面
      uni.navigateTo({
        url: "./webView/webView?contractUrl=" + this.contractUrl,
      });
      break;
    default:
      this.androidOpenPdf(this.contractUrl);
      break;
  }
}

总结

通过上面的逻辑判断我们就可以解决在不同系统手机上完美加载pdf文件的功能了
如果有更好的方法或者需要改进的地方欢迎留言交流，如果对你有帮助的话，欢迎点赞收藏哦~。