uniapp App端 实现pdf文件预览

一、直接使用插件市场的PDF插件

刚开始还是在浏览器上测试的，完全没问题，可是打包安装之后就不行了，PDF显示不出来，其他的文件可以显示，比如Word文档，然后客户必须要PDF，所以这就没啥用了。然后百度看到使用PDF.js可以预览PDF。

二、下载pdf预览需要用到的相关文件

三、预览PDF：

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

/pages/webview/index.vue：

<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可在跳转到预览页面时作为参数传递过来，也可以在预览页面请求获取，根据实际业务需求。