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快速入门 从零开始实现新闻资讯类跨端应用(含源码)完整无秘
更多学习教程，小月博客持续更新…
