大家好,我是滿心
一般中使用
APP
預覽功能很常見,下面分享下關于
pdf
中使用
uniapp
進行
web-view
預覽
pdf
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檔案");
},
-
資源下載下傳hybrid