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​

   ​資源下載下傳