Pdfjs 使用和获取内部事件

当前项目需求用到pdf插件，在github逛了一圈，发现功能最强大的还是mozilla的pdf.js；不过pdfjs功能强大是强大，但是用起来还是挺麻烦的，其项目结构还是远古时期的那种html，js，css写法；没有封装成npm包之类的组件；

如果想直接使用其最全的功能，只能使用其 release 版本，pdfjs-dist/web/viewer.html 的方式使用，具体怎么用，可以百度，百度上这种用法小白讲解还是挺多的。

下面进入深入使用环节讲解：

如果我现在已经用过viewer的方式，正常打开pdf了，这时候想要获取 pdf的当前页数，总页数，监听页数改变事件等，怎么办？

网上方法基本都是各种通过 计时器不停的 获取页数input元素（pageNumber）pdfFrame.contentDocument.getElementById('pageNumber'); 的value值的方式，或者其他类似的方式来实现，这种方法效率低不说，而且不环保。

我一直觉得pdfjs里人员肯定有想应的事件触发，订阅方式，来获取这些信息，不过pdfjs的文档烂而不全，一般人找不到。

我一层层看其源码，终于找到了外部 订阅其内部事件的方法。具体代码如下：

//已获取装载pdfjs viewer的iframe后，再获取iframe window里的pdfViewer这个全局变量
       const t = window.setInterval(()=>{
           const pdfViewerApplication = this.pdfFrame.contentWindow.PDFViewerApplication;
           const pdfViewer = this.pdfFrame.contentWindow.PDFViewerApplication?.pdfViewer;
           if(pdfViewer) {
               window.clearInterval(t);
               //通过pdfViewer.eventBus来监听各种事件;
               pdfViewer.eventBus.on('pagechanging', (e)=>{console.log(e);})
               pdfViewer.eventBus.on('pagenumberchanged', (e)=>{console.log(e);})
               pdfViewer.eventBus.on('fileinputchange', (e)=>{console.log(e);})
               pdfViewer.eventBus.on('nextpage', (e)=>{console.log(e);})
               pdfViewer.eventBus.on('lastpage', (e)=>{console.log(e);})

               //直接获取总页数
               console.log(pdfViewerApplication.pagesCount);
               //直接获取当前页数
               console.log(pdfViewerApplication.page);
           }
       }, 200)

效果如下：

各种事件和变量，都在pdfjs-dist/web/viewer.js这个文件里，在这个文件里搜索 pagechanging 就能找到堆在一起的各种事件了，以及相应的实现参考。在你的代码里想要订阅什么事件，找到相应的事件名，复制到上面的代码里即可。

至于像类似 pagesCount的变量，在 PDFViewerApplication里找就行。

尽情enjoy！

Donate