uniapp pdf预览笔记

开心就好1314520

已于 2022-04-02 09:03:25 修改

阅读量864

点赞数 1

文章标签： vue.js 前端微信小程序

于 2021-12-15 17:12:59 首次发布

本文链接：https://blog.csdn.net/qq_38388578/article/details/121957090

版权

1、在浏览器下载预览

<template>
	<view class="pdf_wrapper" >
		<!-- #ifdef H5 -->
		  	<template >
		  		<web-view :src="pdfUrl"></web-view>
		  	</template>
		  	<!-- #endif -->
			<u-empty
			v-if='noData'
			        mode="data"
			        icon="http://cdn.uviewui.com/uview/empty/data.png"
			>
			</u-empty>
	</view>
</template>

<script>

	export default {
		data() {
			return {
				pdfUrl: "",
				noData:false
			};
		},
		onLoad() {
			  // #ifdef APP-NVUE
			  const eventChannel = this.$scope.eventChannel; // 兼容APP-NVUE
			  // #endif
			  // #ifndef APP-NVUE
			  const eventChannel = this.getOpenerEventChannel();
			  // #endif
			  // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
			  eventChannel.on('acceptDataFromOpenerPage', (data)=> {
			    console.log(data.data)
				if(data.data){
					this.showPdf(data.data)
				}else{
					this.noData=true
				}
				
			  })
		},
		methods: {
			showPdf(url) {
				this.pdfUrl =url
				uni.downloadFile({
					url: this.pdfUrl,
					success: res => {
						uni.openDocument({
							filePath: res.tempFilePath,
							success: (res) => {
								console.log(res, '文件打开成功');
							}
						})
					}
				})
				
			},
			
		}
	}
</script>

2、在APP中直接预览Pdf

从码云：pdf.js 下载hybrid文件夹放到自己项目里
在这里插入图片描述

新建pdfView.vue

<template>
	<view class="pdf_wrapper" >
		<web-view :src="url"></web-view>
			<u-empty
			v-if='noData'
			        mode="data"
			        icon="http://cdn.uviewui.com/uview/empty/data.png"
			>
			</u-empty>
	</view>
</template>

<script>

	export default {
		data() {
			return {
				viewerUrl: '/hybrid/html/web/viewer.html',
				pdfUrl: "",
				// 最终显示在web-view中的路径
				url: '',
				noData:false
			};
		},
		onLoad() {
			  // #ifdef APP-NVUE
			  const eventChannel = this.$scope.eventChannel; // 兼容APP-NVUE
			  // #endif
			  // #ifndef APP-NVUE
			  const eventChannel = this.getOpenerEventChannel();
			  // #endif
			  // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
			  eventChannel.on('acceptDataFromOpenerPage', (data)=> {
			    // alert("传递路径"+data.data)
				if(data.data){
					// h5，使用h5访问的时候记得跨域
					// #ifdef H5
					this.url = `${this.viewerUrl}?file=${encodeURIComponent(data.data)}`;
					// #endif
					
					// 在安卓和ios手机上
					// 判断是手机系统：安卓，使用pdf.js
					// #ifdef APP-PLUS
					if(plus.os.name === 'Android') {
						this.url = `${this.viewerUrl}?file=${encodeURIComponent(data.data)}`;
					}
					// ios，直接访问pdf所在路径
					else {
						this.url = encodeURIComponent(data.data);
					}
					// #endif
				}else{
					this.noData=true
				}
				
			  })
		},
		onShow() {
			iCityBridge.setTitle('PDF下载查看');
		},
		methods: {
			showPdf(url) {
				this.pdfUrl =url;
				// alert('调用'+url)
				//iCityBridge.openFile({url});
				uni.downloadFile({
					url: this.pdfUrl,
					success: res => {
						uni.openDocument({
							filePath: res.tempFilePath,
							success: (res) => {
								console.log(res, '文件打开成功');
							}
						})
					}
				})
				
			},
			
		}
	}
</script>

<style lang="scss" scoped>
.pdf_wrapper{
	width: 100%;
	height: 100%;
}
</style>