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

admin管理员组

文章数量:1545778

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

一、预览pdf

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

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

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

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

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

 项目的目录级别：

在页面中显示，我这里还是用的最上面的插件，只是把这里的链接改成了本地的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

<template>
	<view>
		<button v-if="!isWeiXin" class="download-btn" type="default" @click="downLoad()">点击下载pdf</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isWeiXin: true,
				fileUrl:''
			};
		},
		
		onLoad(options) {
			if(options && options.url){
				this.fileUrl = options.url;
				console.log(this.fileUrl)
			}
			
			this.getIsWxClient();
		},
		methods: {
			// 判断是否是微信浏览器
			getIsWxClient() {
				const ua = navigator.userAgent.toLowerCase()

				if (ua.match(/MicroMessenger/i) == 'micromessenger') {
					this.isWeiXin = true;
					uni.showModal({
						title: '提示',
						content: '请点击右上角，在浏览器打开页面。',
						showCancel: false
					});
				} else {
					this.isWeiXin = false
				}
			},

			downLoad() {
				console.log('download')
				uni.showLoading({
					title: "正在请求数据"
				});
				uni.request({
					url: this.fileUrl, //获取文件流的请求路径
					responseType: "arraybuffer",
					success: (response) => {
						uni.hideLoading();
						console.log("response:", response)
						if (!response) {
							uni.showToast({
								title: "下载失败",
								duration: 2000
							});
						}
						let blob = new Blob([response.data]);
						let downloadElement = document.createElement("a");
						let href = window.URL.createObjectURL(blob); //创建下载的链接
						downloadElement.href = href;
						downloadElement.download = '文件.pdf'; //下载后文件名
						document.body.appendChild(downloadElement);
						downloadElement.click(); //点击下载
						uni.showToast({
							title: "下载成功",
							duration: 2000
						});
						document.body.removeChild(downloadElement); //下载完成移除元素
						window.URL.revokeObjectURL(href); //释放掉blob对象

					}
				})
			}
		},
	}
</script>

<style lang="scss">
	.download-btn{
		width:50%;
		background:#3273BD;
		color:#fff;
		margin-top:100rpx;
	}
</style>

本文标签： 浏览器appUniPDF