uniapp:实现在线PDF文件预览

PDF插件地址：https://gitcode.com/gh_mirrors/go/Google-Drive-PDF-Downloader

<button @click="toPdf">pdf</button>	methods: {		toPdf() {			uni.navigateTo({				url: './course/pdf'			})		}	}

<template>	<viewclass="content">		<web-view:src="url1" @message="handlePostMessage"></web-view>		<!-- <web-view src="https://cn.bing.com/" @message="handlePostMessage"></web-view> -->	</view></template><script>/* uni页面通信文档 * https://ask.dcloud.net.cn/article/35083 * 组件使用pdf.js源码修改了部分内容 * 只需要完成web-view监听页数并与uni通信即可 * @kklxx 2022/12/09修复组件通信 */import {	computed} from "vue";export default {	data() {		return {			viewerUrl: '/static/pdf/web/viewer.html', // 注意：静态的html文件需要放在根路径下的 hybrid/html 文件夹中			fileUrl: "", // 要访问的本地pdf的路径			url1: '', // 最终显示在web-view中的路径			// currentPage: 1, //初始页			totalPage: 0, //总页码			currentReadPage: 0, //当前页码		};	},	onLoad(options) {		this.fileUrl = "http://103.213.97.43:8081/group1/M00/00/EF/wKgAoWVEZgiAA8tOAAtT0ZynsZE457.pdf"		/* 初始页面 */		this.pageInt(); //获取pdfs数据	},	mounted() {		/* H5页面通信方式 */		// #ifdef H5		window.addEventListener("message", this.ReceiveMessage);		// #endif	},	//页面销毁前	beforeDestroy() {		uni.removeStorage({ //清除pdf留下的缓存，不干扰新的pdf载入			key: 'pdfjs.history',			success() {				// console.log("removeStorage", res)			}		})	},	methods: {		//页面初始化		pageInt() {			this.url1 = `${this.viewerUrl}?file=${encodeURIComponent(this.fileUrl)}&page=` + 1;			console.log(this.url1, 99)		},		/* 		 *	做成监听滚动条判断更好		 * 		 */		//uni 组件通信 监听		handlePostMessage(data) {			let arr = data.detail.data.pop()			this.totalPage = arr[0].totalPage //总页数			this.currentReadPage = arr[1].page + 1 //当前页数			console.log("app:", this.totalPage, this.currentReadPage);		},		//h5 监听		ReceiveMessage(event) {			if (event.data && event.data.data && event.data.data.arg) {				this.totalPage = event.data.data.arg[0].totalPage				this.currentReadPage = event.data.data.arg[1].page + 1			}			console.log("app:11111111", event, this.totalPage, this.currentReadPage);		},		//页面销毁前动作		addBrowseRecord() {			// console.log("总页数：",this.totalPage);			// console.log("当前页数：",this.currentReadPage);		},	}};</script><stylelang="scss"scoped></style>