uniapp -- pdf文档预览_uniapp中文手册pdf

方式一

需先下载hybrid 然后解压到项目根目录

下载地址

html:
<template>
	<view class="w-b">
		<web-view id="foo" style="width:100% ;margin: 0 auto;" :src="allUrl"></web-view>
	</view>
</template>

js:
<script>
	export default {
		data() {
			return {
				viewerUrl: '/hybrid/html/web/viewer.html',
				allUrl: ''
			}
		},
		onLoad(options) {
		  // 本地文件路径和http路径方式相同
			this.changeBlob('/static/asd.pdf').then(res => {
				let url = window.URL.createObjectURL(res)
				this.allUrl = this.viewerUrl + '?file=' + url
			})	
		},
		methods: {
			//地址转文件
			changeBlob(url) {
				return new Promise(resolve => {
					const xhr = new XMLHttpRequest();
					xhr.open('GET', url, true);
					xhr.responseType = 'blob';
					xhr.onload = () => {
						if (xhr.status === 200) {
							resolve(xhr.response);
						}
					};
					xhr.send();
				});
			},
		}
	}
</script>

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

方式二

html:
<template>
	<view class="w-b">
		<web-view id="foo" style="width:100% ;margin: 0 auto;" :src="allUrl"></web-view>
	</view>
</template>

js:
<script>
	export default {
		data() {
			return {
				viewerUrl: '/hybrid/html/web/viewer.html',
				allUrl: ''
			}
		},
		onLoad(options) {
		// encodeURIComponent 函数可把字符串作为 URI 组件进行编码。
		 let fileUrl = encodeURIComponent('/static/asd.pdf') 
		 this.allUrl = this.viewerUrl + '?file=' + fileUrl
		}
	}
</script>


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