uniapp实现在线PDF文件预览

下载pdf文件放在static文件夹下

bug：hbuildX创建的项目pdf文件夹可以放在根目录下面，但是cli创建的项目无法预览，只能放在static下面

按钮跳转预览页面

<button @click="toPdf">pdf</button>
	methods: {
		toPdf() {
			uni.navigateTo({
				url: './course/pdf'
			})
		}
	}
1
2
3
4
5
6
7
8

预览页面

重点：1、viewerUrl的路径

<template>
	<view class="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>

<style lang="scss" scoped></style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89