uniapp web-view预览PDF

下载

https://mozilla.github.io/pdf.js/getting_started/

在 static 文件夹下新建 pdf 文件夹，将解压文件放进 pdf 文件夹下

<template>
	<view>
		<web-view :src="url"></web-view>
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
				url: '',//PDF路径
				viewerUrl:'/static/pdf/web/viewer.html',//用来渲染PDF的html
				fileUrl:'/static/pdf/web/compressed.tracemonkey-pldi-09.pdf'//pdfjs自带的默认PDF
			};
		},
		onLoad(option) {
			console.log('=>进入了PDF预览页面')
			console.log('获取的参数=>',option)
			if(option.id !=undefined && option.id !='undefined' && option.id !='' && option.id !=null){
				this.url =this.viewerUrl+'?file='+encodeURIComponent(this.fileUrl); // encodeURIComponent 函数可把字符串作为 URI 组件进行编码;
                //以发起请求的方式获取预览PDF
				// uni.request({
				// 	url: '/xxx/xxx/xxx/previewPdf/'+option.id,
				// 	method: 'GET',
				// 	header: { 'Authorization': 'Bearer ' + uni.getStorageSync('Admin-Token') },//自定义请求头
				// 	responseType: 'arraybuffer',
				// 	success: (res) => {
				// 		let blob = new Blob([res.data],{type:'application/pdf;chartset=UTF-8'});//转换blob数据类型
				// 		let href = URL.createObjectURL(blob);
				// 		this.url =this.viewerUrl+'?file='+encodeURIComponent(href);// encodeURIComponent 函数可把字符串作为 URI 组件进行编码;
				// 	},
				// });	
				console.log('PDF预览成功=>')
			}else{//无参就不预览PDF
				uni.showModal({//弹出提示
					title:'系统提示',//提示的标题
					content: '参数无效',//提示的内容
					confirmText:'返回',//取消按钮的文字，默认为"取消"
					showCancel:false,//是否显示取消按钮，默认为 true
					success: (res) => {
						if (res.confirm) {//监听弹窗返回按钮
							uni.navigateBack();//返回上一页
						} 
					}
				});
			}
		},
		methods: {
			
		}
	}
</script>
 
<style>
 
</style>