一、uniapp预览pdf要下载一个pdf.js插件(

 将下载的文件解压,把解压的文件放到项目的hybild文件夹下的html里

在pages文件夹下新建一个filePreview.vue页面来预览pdf文件,代码如下

<template>
  <view>
    <web-view :src="allUrl"></web-view>
  </view>
</template>

<script>
  export default {
    data() {
	  return {
	    viewerUrl: '/hybrid/html/web/viewer.html', 
		allUrl: ''
	  }
	},
	onLoad(options) {
	  this.allUrl = this.viewerUrl + '?file=' + options.url
	}
  }
</script>


<style>

</style>

 在你原来的页面先获取到要预览的pdf文件的文件流,然后创建预览路径,跳转到预览页面时将预览路径作为参数传递

uni.request({
				  url:'http://xxxxxxx', 
				  responseType: 'arraybuffer', //这里记得设置响应数据格式,不然预览的pdf是空白
				  success: (response) => {
					if(!response){
					  	uni.showToast({
					  		title:"协议预览失败",
					  		duration:2000
					  	});
					}
					let pdfData = response.data; //pdfData是后端返回的文件流
				    let blob = new Blob([ pdfData], {
				      type: 'application/pdf;charset=UTF-8'
				    })
				    pdfData = window.URL.createObjectURL(blob) //创建预览路径
				    this.agreementUrl = encodeURIComponent(pdfData)
				  },
				  fail: err => {
				    console.log(err)
				  }
				});
uni.navigateTo({
	url: '/pages/mob/agreement/filePreview?url=' + this.agreementUrl
})//这里的url指向你刚创建的filePreviwe.vue页面

这样就能成功预览

二、下载 PDF文件

uniapp自带uni.download方法下载不了pdf,并且下载后需要用uni.saveFile方法来保存文件,目前该方法H5端不适用所以用了以下方法

downloadAgreement: function() {
				uni.showLoading({
					title:"正在请求数据"
				});
				uni.request({
					url:'http://xxxxxxxxx', //获取文件流的请求路径
					responseType: "arraybuffer",  
					success: (response) => {
						uni.hideLoading();
						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(); //点击下载
						document.body.removeChild(downloadElement); //下载完成移除元素
						window.URL.revokeObjectURL(href); //释放掉blob对象
					}
				})
			},

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐