uni-app h5微信浏览器 预览和下载pdf

​​​​​​预览offce文件。可以打开 PDF WORD PPT EXCEL 文件 - DCloud 插件市场

一、预览pdf

预览本来使用的是uni-app插件市场的插件，但是这里会使用到插件开发者的服务器，出于安全考虑，就打算用pdf.js来实现预览。

pdf.js这个使用起来是比较简单的，但是因为版本的问题无法打开pdf，一直在报下面截图的错误。

换了一个旧版本之后就好了。无语......

一开始用的是官网的最新版。

下载之后解压，把文件放在static中，文件夹的名字随便取，我这里取的是pdfjs。

 项目的目录级别：

components	mumu-previewOffce	mumu-previewOffce.vue
pages	index	index.vue、 IOSDownLoad.vue
static	pdfjs	/web/viewer.html

在页面中显示，我这里还是用的最上面的插件，只是把这里的链接改成了本地的html文件地址。

pasePdfUrl(url) {
	// 找到对应的pdfjs里的viewer.html文件
	return `./static/pdfjs/web/viewer.html?file=${url}`
},

 pdf.js后面的url，可以是网络地址，也可以是blob。但是如果使用这个插件，url必须是网络地址。我这里是因为赖得写布局了，所以就使用了插件。这样预览就解决了。

二、下载pdf

安卓手机下载直接打开文件地址就可以自动跳转到浏览器下载。

苹果手机不能自动下载，需要我们新建一个页面，让用户在浏览器打开这个页面，然后点击下载按钮下载文件。

1、判断是否是ios，是的话去ios的下载页面，不是就直接打开url。

// pages/index/index

isIos() {
	let u = navigator.userAgent
	let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)

	if (isIOS) {
		return true
	} else {
		return false
	}
},


downLoad() {
	if(this.isIos()){
		uni.navigateTo({
		    url:'/pages/inedx/IOSDownLoad?url='+this.fileUrl
	    })
	}else{
        //直接在浏览器中打开
		window.location.href = this.fileUrl;
	}
}

2、在ios页面中，让用户手动在浏览器打开页面，然后主动点击按钮去下载pdf文件。

// pages/inedx/IOSDownLoad