|
记录uni-app实现在小程序和h5中在线预览pdf功能
笔者写这篇笔记是为了记录方便自己后期回忆的，毕竟能让我记住的应该都是花了我不少时间去踩坑的，哇的一声哭了出来！
在小程序中预览
在小程序中可以调用API下载文件，再打开文件，就可以实现
先调用downloadFile获取到本地文件路径tempFilePath
再调用openDocument就可以在新页面中预览文件，这个API还可以给参数fileType赋值，比如pdf，就会指定类型打开pdf文件
uni.downloadFile({
url: 'https://example.com/somefile.pdf',
success: function (res) {
var filePath = res.tempFilePath;
uni.openDocument({
filePath: filePath,
success: function (res) {
console.log('打开文档成功');
}
});
}
});
关于API的具体解释，可以前往官网查看文档openDocument的文档说明
在h5中预览
按照正常的逻辑，说到浏览器预览文件，可能首先想到的就是嵌一个a链接，但是这个对于苹果的手机浏览器来说是可以用的，然而安卓手机点击a链接之后则是会将文件直接下载下来，但是用户肯定不满意啊，好家伙，你还让我下载，企图占用我的手机内存，你这个开发不简单啊！
所以苦逼的开发只能想办法实现苹果安卓都能直接在线预览pdf，这时候就可以把pdf.js插件安排上了，可以去官网下载zip文件，或者上网百度一下，这块已经有挺多大佬已经整理了，这里放一个我最后解决问题参考的链接
这个小哥写的还挺明白的，基本上跟着走就能实现
export default {
data() {
return {
pdfUrl:'',
from:''
}
},
onLoad() {
这里的pdfUrl可以是线上pdf的地址哦，而不是文件流（笔者还比较菜，文件流这块还没学，有点搞不清楚哈，欢迎大家的交流）
this.pdfUrl = '/hybrid/html/web/viewer.html?file='+encodeURIComponent(pdfUrl)
},
}
这里需要注意的是这个插件体积还挺大的，我感觉不是那么适用于小程序这种轻便的项目，所以建议使用条件编译将小程序和h5区分一下，小程序还是直接使用API，h5去使用插件，这样子打包之后，插件的体积不会被包含在小程序中，h5的话就无所谓啦~
|