关于使用uniapp在小程序中预览pdf文件可手势缩放的至简方案
写这篇文章记录一下开发过程中遇到的一个pdf的预览问题。坑况是这样的,刚开始的需求是,要在线预览后台传过来的pdf格式流文件。于是上网上找了许多种方案,其中包括pdfobject、pdfjs、vue-pdf,最终采取了pdf.js的形式达到了预期效果。但是后面又加了需求,需要能够分享以及手指缩放当前pdf。前者在小程序特别好实现,后者着实让我头疼。怎么个头疼法,一起来看看
问题阐述:
现在的需求是要做一个在手机上预览pdf文件的功能,且能够做到手指缩放功能。实现预览的实现方式网上一大把,有pdfobject、pdf.js、vue-pdf等等。我当时就采用的pdf.js解析文件,在小程序端采用的是web-view容器来装远程的viewer.html,没错,预览功能是达到了,缩放还没有啊…。于是乎,各种百度,各种角度入手,把百度都翻了个底朝天,没解决…在试用vue-pdf的时候还遇到了pdf.js过大什么的无法编译的问题。
问题解决:
从webview下手在app中官方文档有之处解决方案:
可是我现在要实现的是小程序的缩放,在小程序中我甚至发现我获取不到这个webview对象,这就很烦,这条路当时也没走通。
一条路走到黑,静下心来回头看看文档,发现了这个超简单的解决方案,简直是完美兼容小程序,当即就舍弃了pdf.js
是的就是他,使用方法如下:
uni.downloadFile({
url: this.pdfUrl, //这个url我采用的是后端的接口路径返回的是pdf流 如: http://vastwu.com/api/jiekou
success: (res)=> {
var filePath = res.tempFilePath;
this.fileSS=filePath;
uni.openDocument({
filePath: filePath,
fileType:'pdf',
success: function (res) {
console.log('打开文档成功');
uni.hideLoading();
}
});
}
});
官方说的很明确,就是要搭配downloadFile使用,openDocument采用的就是前者的临时路径。
该方法就是先把文件下载下来,在打开该文件,在小程序中,会默认使用qq浏览器文件管理器打开,打开后默认就是可以手势缩放的。但是在其他端,比如app是要使用外部文件大开的。不过,在小程序中这么在线预览也很棒了。当然这个浏览器页面我们不能控制,只能预览一下,小程序的胶囊按钮这里也没有,所以,我们只能写一个新的或者上一个页面来分享。我个人觉得这个方法特别好用。又简单
写这篇文章主要是当时踩坑的时候翻百度个底朝天也没收获,希望大家不走弯路!
--vastwu
更多推荐
所有评论(0)