uni-app 微信小程序中打开预览pdf文件

uni-app微信小程序中打开预览pdf文件

首先说一下我为什么要分享一下这样子的文章,因为我被这个需求整的很是郁闷,为什么手机要分那么多的系统呢?这不是给开发人员找事吗??‍♀️  【兼容性】一个亘古不变的BUG。废话不说了下面分享一下我是如何实现的,中间遇到了哪些令人头疼的问题。

1、 小程序中打开pdf的几种方法

  • 第一种:用微信自带的方法  wx.downloadFile({ }) + wx.openDocument({ })
  • 第二种:使用 web-view,uni-app 中 web-view 可以直接加载 pdf 文件
  • 第三种:可以使用网上说的pdf.js 来实现 (我没有用这个方法,下面就不介绍这个了)

下面就依依介绍一下吧。

2、第一种:微信原生方法打开预览pdf

思路: 1. 下载pdf文件(不是真的下载到了本地哦)—>  2. 打开pdf文件

//这里的 url 就是pdf文件的路径,直接调用此方法就可以打开pdf文件
openReport(url) {
    uni.showLoading({
     title: '加载中',
     mask: true
    })
    wx.downloadFile({
     url: url,
     success: function(res) {
      console.log(res)
      uni.hideLoading()
      var filePath = res.tempFilePath;
      uni.showLoading({
       title: '正在打开',
       mask: true
      })
      wx.openDocument({
       filePath: filePath,
       fileType: 'pdf',
       success: function(res) {
        console.log(res)
        uni.hideLoading()
        console.log('打开文档成功');
       },
       fail: function(err) {
        uni.hideLoading()
        console.log('fail:' + JSON.stringify(err));
       }
      });
     },
     fail: function(err) {
      uni.hideLoading()
      console.log('fail:' + JSON.stringify(err));
     }
    });
   },

也可以用uni-app 的方法: uni-app官网  用法是一样的

使用此方法注意⚠️:

  • 在打开文件的方法上 fileType: ‘pdf’, 必须定义,虽然官网上说不是必须写的,但是不写 IOS 系统上真的打不开哦。
  • 我在项目中遇到的问题: ios手机查看pdf文件偶尔调用成功接口了,但是就是不出现预览打开合同的页面(头大)—-> 如何解决呢?紧接着看下面的方法。

3、第二种:使用 web-view 直接加载 pdf 文件

经过调研,web-view里面可以直接加载pdf文件。方法如下:

<template>
    <view style="width: 100%;">
        <web-view :src="webUrl"></web-view>
    </view>
</template>

这里的 webUrl 就是pdf文件的链接,我是通过url参数传递进来的,这里需要注意如果参数过长会有问题的,解决方法:url参数过长

下面是通过url参数动态获取文件链接

               onLoad(options) {
			console.log(options)
			let id = options.id
			let token = uni.getStorageSync('token')
			console.log(token)
                        //这里可以拼接出任意你需要的链接
			this.webUrl = 'this.baseUrl'+ id + '?token=' + token
			console.log(this.webUrl)
		},

使用此方法注意⚠️:

  • 安卓系统不能正常显示 pdf文件(网上查的原因有很多,但是没有什么好的解决方法)
  • web-view 加载pdf 需要在小程序后台配置好加载的链接

4、如何同时兼容IOS 和 安卓 的手机用户呢?

说实话当时没有想到什么好的方法,脑子里面一直想的是用其中一种方案来解决兼容问题,好在工作中得遇良师:大帅老师,真的帮助我很多很多,我很感恩。这是老师的掘金主页:【 大帅搞全栈 】非常值得去看一看哦。

解决方案:

  • 微信原生方法: 安卓好用, ios 不好用
  • web-view: 安卓不好用,ios 好用

俗话说条条大路通罗马,我就比较爱钻牛角尖,好在大帅老师给我提出一个方法: 安卓手机用原生,ios手机用web-view 完美解决啊。哈哈哈…

switch (uni.getSystemInfoSync().platform) {
    case 'android':
        console.log('安卓')
        // 这里直接调用原生的方法,我们上面定义的
        this.openReport(this.bookUrl)
        break;
    case 'ios':
        console.log('IOS')
        //这里跳转web-view页面
        uni.navigateTo({
            url:'../contract/contract?id=' + this.contractId[1].id
        })
       break;
    default:
       this.goReport(this.bookUrl)
       break;
    }

通过上面的逻辑判断我们就可以解决在不同系统手机上完美加载pdf文件的功能了。虽然路子野,但是能够解决问题不是。

今天周五了, 写完就下班了,希望上面分享的可以帮助到以后学习的人。如果大家有更好的解决方案,真心希望可以联系我一下:微信: ITBOKE , 周末愉快。拜拜

—— 微信小程序学习资源下载—–

1、uni-app快速入门 从零开始实现新闻资讯类跨端应用(含源码)完整无秘

2、微信小程序入门与实战 常用组件API开发技巧项目实战

3、微信小程序入门与实战(最新完整版)

4、微信小程序云开发-从0打造云音乐全栈小程序 完整版

5、纯正商业级应用-微信小程序开发实战-完整无秘

6、商业级支付宝小程序入门与实战 高清无秘 百度云盘下载

更多学习教程,小月博客持续更新…

站内部分资源收集于网络,若侵犯了您的合法权益,请联系我们删除!
赞赏是最好的支持
如果对你有帮助那就支持一下吧
立即赞赏
分享到:
赞(2) 打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

小月博客-一个专注于分享的技术博客
没有账号? 忘记密码?