Mnsin博客
立即登录 马上注册

最近公司接了一个项目,需要在APP里面预览PDF文件,然后就遇到了一点问题:

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

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

二、下载pdf预览需要用到的相关文件(即hybrid文件夹)

下载地址:https://mozilla.github.io/pdf.js/
uniapp App端 实现pdf文件预览
将下载好的文件放在根目录下面,

三、预览PDF

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

/pages/webview/index.vue:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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可在跳转到预览页面时作为参数传递过来,也可以在预览页面请求获取,根据实际业务需求。
APP预览结果:
uniapp App端 实现pdf文件预览

好像也可以使用Android的原生插件,我也没研究过,uniapp插件市场要收费,没尝试过,有需要的可以试试!!

关注公众号阅读更多精彩内容
uniapp App端 实现pdf文件预览

本站所有文章、图片、资源等如无特殊说明或标注,均为来自互联网或者站长原创,版权归原作者所有;仅作为个人学习、研究以及欣赏!如若本站内容侵犯了原著者的合法权益,可联系我们进行处理,邮箱:weiyong9898@163.com
赞(4) 打赏
标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"uniapp App端 实现pdf文件预览"

表情

最新评论

    暂无留言哦~~
谢谢你请我吃鸡腿*^_^*

支付宝扫一扫打赏

微信扫一扫打赏