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文件");
   },

源码下载地址

感谢您的来访，获取更多精彩文章请收藏本站。