uniapp预览、下载PDF（文件流）

最新推荐文章于 2024-09-28 18:01:12 发布

Renyun_

最新推荐文章于 2024-09-28 18:01:12 发布

阅读量1.8w

点赞数 14

文章标签： uni-app

本文链接：https://blog.csdn.net/Renyun_/article/details/121957218

版权

本文详细介绍了在uniapp中如何实现PDF文件的预览和下载。首先，通过引入pdf.js插件，将文件流放入指定目录，创建web-view页面进行预览。在页面加载时设置预览URL。其次，对于PDF下载，由于uni.downloadFile在H5端不适用，文章提供了一种利用Blob和a标签创建下载链接的方法，实现了文件的下载。

摘要由CSDN通过智能技术生成

一、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对象
					}
				})
			},