关于使用uniapp在小程序中预览pdf文件可手势缩放的至简方案

问题阐述

现在的需求是要做一个在手机上预览pdf文件的功能,且能够做到手指缩放功能。实现预览的实现方式网上一大把,有pdfobject、pdf.js、vue-pdf等等。我当时就采用的pdf.js解析文件,在小程序端采用的是web-view容器来装远程的viewer.html,没错,预览功能是达到了,缩放还没有啊…。于是乎,各种百度,各种角度入手,把百度都翻了个底朝天,没解决…在试用vue-pdf的时候还遇到了pdf.js过大什么的无法编译的问题。

问题解决
从webview下手在app中官方文档有之处解决方案:关于使用uniapp在小程序中预览pdf文件可手势缩放的至简方案_第1张图片
可是我现在要实现的是小程序的缩放,在小程序中我甚至发现我获取不到这个webview对象,这就很烦,这条路当时也没走通。

一条路走到黑,静下心来回头看看文档,发现了这个超简单的解决方案,简直是完美兼容小程序,当即就舍弃了pdf.js
关于使用uniapp在小程序中预览pdf文件可手势缩放的至简方案_第2张图片
是的就是他,使用方法如下:

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

你可能感兴趣的:(uniapp,vue.js,前端,html5)