一般APP中使用pdf预览功能很常见，下面分享下关于uniapp中使用web-view进行pdf预览

web-view
web-view是一个web浏览器组件，可以用来承载网页的容器，会自动铺满整个页面（nvue 使用需要手动指定宽高）。

各小程序平台，web-view 加载的 url 需要在后台配置域名白名单，包括内部再次 iframe 内嵌的其他 url 。

具体可以看uniapp官网介绍

  1. 下载hybrid放置在项目根目录

  1. 创建组件pdf-preview
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template>
	<view>
		<web-view :src="pdfUrl"></web-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pdfUrl: '',
			};
		},
		onLoad(params) {
			this.pdfUrl = '/hybrid/html/pdf.html?url=' + params.url
		},
		onBackPress() {}
	}
</script>
  1. 引用
1
2
3
4
5
<view v-if="item.imageList != ''" class="bo-img">
	附件：<view v-for="(img,index) in item.imageList" :key="index">
		<span @click="img.type === 'pdf' ? preview(baseUrl + img.fileUrl) : tips()">{{img.originalName}}    	    </span>
			</view>
</view>
1
2
3
4
5
6
7
8
9
10
11
preview(fileUrl) {
	this.$u.route({
		url: "/pages/common/pdfPreview",
		params: {
		   url: fileUrl
		},
	})
},
tips() {
	console.log("不是pdf文件");
},

资源下载