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​

   ​放置在项目根目录

1. 创建组件​

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

1. 引用

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

1. ​

   ​hybrid​

   ​资源下载