【预览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文件的功能了
如果有更好的方法或者需要改进的地方欢迎留言交流,如果对你有帮助的话,欢迎点赞收藏哦~。

  • 4
    点赞
  • 42
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值