评论

利用PDF.js在微信小程序里预览PDF文件

通过PDF.js解析预览PDF

在微信小程序可以通过wx.downloadFile 和 wx.openDocument 两个api下载并打开pdf文件。这种方式主要有不少的缺点:

1、需要下载才可以查看,且每次打开都需要下载生成一个临时文件,如果PDF文件比较多的话,临时文件会越来越多,且如果PDF文件比较大的话,打开会比较慢。

2、在导航栏显示标题是临时文件名,看上去不够优雅。

3、翻页不方便。

那PDF能不能在小程序直接预览呢?我尝试用微信小程序的web-view里显示PDF的文件,在开发工具里可以显示,但在真机里无法显示。在微信开放社区看有人用PDF.js在浏览器里打开PDF文件,PDF.js 由 Mozilla 提供支持,目标是创建一个通用的、基于 Web 标准的平台,用于解析和呈现 PDF. 通过web-view方式打开通过PDF.js解析的PDF文件,在微信开发工具里无法正常显示,不过好消息是:在真机里可以显示正常。

使用PDF.js来解析PDF方法如下:

1、去PDF.js官方网站下载此框架:https://mozilla.github.io/pdf.js/getting_started

2、把PDF.js部署到网站,PDF.js有两个文件夹web和build,把这两个文件放到网站的一个目录下比如pdfljs目录,在web目录下有个viewer.html文件,可以用它来在线解析pdf文件,当然pdf文件的链接需要在同一个域名,预览的方式是:

https://wwww.domianname.com/pdfjs/web/viewer.html?file=xxx/xxx/xxx.pdf

然后在web-view打开这个链接,就可以直接预览PDF文件了

注意以上方式PDF文件的链接所在域名需要设置的小程序业务域名里。对于跨域的链接,虽然也支持,不过需要特别处理,具体详见链接:https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions#faq-xhr

利用PDF.js在微信小程序里预览PDF文件,支持支持PDF.js的相关功能,比如:侧栏,查找,分页,缩放,添加文字,绘图,旋转,演示模式等。

上面是通过官方viewer.html来显示PDF文件,也可以通过引入PDF.js的方式来解析和显示,这个方式就可以自定义功能。方法如下:

1、引入pdf.js库

<script src="./build/pdf.js"></script>
<script src="./build//pdf.worker.js"></script>


2、用canvas接收需要读取到的pdf内容并显示

<canvas id="myCanvas"></canvas>


3、创建PDF对象:data可以是pdf文件对应的Base64字符串,也可以是文件所在相对或者绝对路径,也可以是一个在线文件url地址

var loadingTask = pdfjsLib.getDocument(data)
loadingTask.promise.then(function (pdf) {
                for (var i = 1; i <= pdf.numPages; i++) {
                    pdf.getPage(1).then(function (page) {
                        var scale = 2
                        var viewport = page.getViewport({ scale: scale })
                        var canvas = document.getElementById('myCanvas')
                        var context = canvas.getContext('2d')
                        canvas.height = viewport.height
                        canvas.width = viewport.width
                        var renderContext = {
                            canvasContext: context,
                            viewport: viewport,
                        };
                        page.render(renderContext);
                    })
                }
            });

有关PDF.js的更多信息,可以参考官方网站:https://mozilla.github.io/pdf.js/


最后一次编辑于  2023-08-22  
点赞 4
收藏
评论

8 个评论

  • 天天旺
    天天旺
    07-03

    这个代码根本就没法在小程序里执行,小程序都不支持es6, pdfjs里有大量的promise等

    07-03
    赞同 1
    回复 1
    • Jianbo
      Jianbo
      07-04
      此方法是把pdf.js放到h5里执行,不是直接在小程序执行
      07-04
      回复
  • 春非我春
    春非我春
    04-28

    大佬,word文件有方法吗

    04-28
    赞同 1
    回复 1
    • Jianbo
      Jianbo
      04-30
      我没找到方法。
      04-30
      回复
  • 玲大人
    玲大人
    03-23

    大佬请问一下,小程序最多 2M,代码体量已经满了,这种情况怎么处理呢?

    03-23
    赞同 1
    回复 1
    • Jianbo
      Jianbo
      03-23
      把图片改为网络图片
      03-23
      回复
  • Baymax
    Baymax
    10-25

    webview直接铺满全屏了,如何局部加载pdf呢

    10-25
    赞同
    回复 1
    • Jianbo
      Jianbo
      10-25
      webview方式只能满屏,无法局部加载
      10-25
      回复
  • Mandolin Wyen
    Mandolin Wyen
    10-15

    请问大佬 这种方式使用webview组件吧? 个人开发者是没法使用webview的把?

    10-15
    赞同
    回复 1
    • Jianbo
      Jianbo
      10-16
      是的
      10-16
      回复
  • Nikki
    Nikki
    05-09
    大佬 小程序不是不支持document.getElementById吗?最后一种方法是怎么在小程序实现的呢
    
    05-09
    赞同
    回复 1
    • Jianbo
      Jianbo
      05-10
      不支持
      05-10
      回复
  • 星星
    星星
    04-16

    大佬 你这第二种形式是自己额外写html文件来进行的吧 但是这样搞就只剩下最简单的功能模块了 额外的扩充功能 比如下载 翻页啥的要怎么加呢 有文档吗

    04-16
    赞同
    回复 3
    • Jianbo
      Jianbo
      04-17
      不需要加,PDF.js都提供
      04-17
      1
      回复
    • 星星
      星星
      04-23回复Jianbo
      可以了 之前没注意你说的开发工具不能用 用真机就行了 感谢,顺便问下 打开的文件中 保存功能是不能使用的 这个有解决办法吗
      04-23
      回复
    • Jianbo
      Jianbo
      04-24
      在微信上没什么解决办法。
      04-24
      回复
  • Starydesigner
    Starydesigner
    2023-10-16

    大佬,提示pdfjsLibis not defined,咋处理?

    2023-10-16
    赞同
    回复 1
    • 溴锑锑跃迁
      溴锑锑跃迁
      2023-10-29
      需要额外导入pdf.worker.js
      2023-10-29
      回复
登录 后发表内容