在uni-app中使用web-view进行PDF预览的方法分享
一般
APP
中使用uniapp
中使用web-view
进行
web-view
web-view
是一个 web
浏览器组件,可以用来承载网页的容器,会自动铺满整个页面(nvue 使用需要手动指定宽高)。
各小程序平台,web-view 加载的 url 需要在后台配置域名白名单,包括内部再次 iframe 内嵌的其他 url 。
具体可以看uniapp官网介绍
- 下载
hybrid
放置在项目根目录
- 创建组件
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>
- 引用
<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文件");
},
空空如也!