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​​资源下载