uniapp使用web-view实现pdf、h5预览

大家好，我是满心

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

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

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

具体可以看uniapp官网介绍

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

2. 创建组件pdf-preview

<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>

3. 引用

<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>

preview(fileUrl) {
	this.$u.route({
		url: "/pages/common/pdfPreview",
		params: {
		   url: fileUrl
		},
	})
},
tips() {
	console.log("不是pdf文件");
},

4. hybrid资源下载