uniapp App端 实现pdf文件预览_uniapp预览pdf

一、下载pdf预览需要用到的相关文件（即hybrid文件夹）

微信关注公众号【拾句少年】，回复【uniapp】，获取网盘下载链接。

二、将步骤一下载解压得到的hybrid文件夹放在/src目录下，即 /src/hybrid

三、预览pdf

1、预览pdf需要用到uniapp的webview组件，所以注册并创建一个专门用于预览pdf的页面，页面使用webview组件。

/pages/webview/index.vue：

<template>
  <view style="width: 100%;">
    <web-view :src="allUrl"></web-view>
  </view>
</template>
 
<script>
  export default {
    data () {
      return {
        allUrl: '',
        viewerUrl: '/hybrid/html/web/viewer.html',
        pdfUrl: 'http://119.91.134.164:60800/enterprise_integrated_services_file/file/download?fileUrl=n0/publicity/20220314/pdf/058416/%E9%99%84%E4%BB%B6%20%202021%E5%B9%B4%E4%BF%83%E8%BF%9B%E5%B0%8F%E5%BE%AE%E5%B7%A5%E4%B8%9A%E4%BC%81%E4%B8%9A%E4%B8%8A%E8%A7%84%E6%A8%A1%E5%8F%91%E5%B1%95%E6%89%B6%E6%8C%81%E5%AE%A1%E6%A0%B8%E7%BB%93%E6%9E%9C%EF%BC%88%E7%AC%AC%E4%BA%8C%E6%89%B9%EF%BC%89.pdf'
      }
    },
    onLoad (options) {
      console.log(20, options.pdfUrl)
      // this.pdfUrl = options.pdfUrl
      let fileUrl = encodeURIComponent(this.pdfUrl) // encodeURIComponent 函数可把字符串作为 URI 组件进行编码。
      this.allUrl = this.viewerUrl + '?file=' + fileUrl
    }
  }
</script>
 
<style>
 
</style>

其中，pdfUrl可在跳转到预览页面时作为参数传递过来，也可以在预览页面请求获取，根据实际业务需求。

2、App端预览效果（好像不支持h5）

记录于2022-5-27.