使用PDF.js在网页显示pdf文件并跳转到指定页码

最近在做一个土地档案管理系统，有个需求是在前端网页展示土地档案扫描件的pdf文件，并根据目录跳转到指定页。

第一个问题，显示pdf文件。引入pdf.js。然后设定html地址，地址为http://localhost:8080/JYSystem/static/plugins/pdfJs/web/viewer.html?file=pdf文件路径

如图

这一步网上已经有很多人实现了，并写了博客，这里我就一笔带过。

第二个问题，根据目录页码跳转到指定页。这个问题看起来挺简单，实际上还是有点麻烦（不知道是不是自己水平还有待提高），主要是网上没人写过类似的东西，无法举（生）一（搬）反（硬）三（套）。既然找不到类似资源，那就自己想办法吧。

1 观察pdf.js中显示pdf的html的页面，viewer.html，发现它有一个页面跳转的工具。只要修改参数好像就可以完成任务。

2 既然是这样，那就传参数吧。用ajax传？抱歉，我自我定位不是程序员（不是我针对程序员，而是我水平不够），不想用那么多所谓技术，我只是想用最简单合理的方式解决问题。我选择的是直接在html里把参数带进来。即http://localhost:8080/JYSystem/static/plugins/pdfJs/web/viewer.html?file=/JYSystem"+document.getElementById("savePath").value+"&page="+qsy+"就是把起始页的页码传过去。

程序截图为

3 接收参数。在viewer.html中加入如下代码

原以为问题就这样解决了，然而并没有。在调试过程中，发现pdf页面确实跳到了指定页，但接着就又跳回了默认的第一页。

4 好吧，只能用最后一招了，修改viewew.js的源码(共7615行)。一行一行看这种低效费时愚蠢且对自己没有任何提升的方式我是很排斥的（但如果迫于无奈，我也只好强忍着干啦，能忍几次实在不好说），看了几行，放弃了，先投个机吧。我觉得出现3的问题，可能是源码在加载html页面时初始化了，我英语还凑合（大二考六级就500多分），就查找initial吧。结果找来找去，我发现了这个函数

setInitialView: function pdfViewSetInitialView(storedHash, scale) {
    this.isInitialViewSet = true;

    // When opening a new file (when one is already loaded in the viewer):
    // Reset 'currentPageNumber', since otherwise the page's scale will be wrong
    // if 'currentPageNumber' is larger than the number of pages in the file.
    document.getElementById('pageNumber').value =
      this.pdfViewer.currentPageNumber = 1;

   /* if (PDFHistory.initialDestination) {
      this.navigateTo(PDFHistory.initialDestination);
      PDFHistory.initialDestination = null;
    } else if (this.initialBookmark) {
      this.setHash(this.initialBookmark);
      PDFHistory.push({ hash: this.initialBookmark }, !!this.initialBookmark);
      this.initialBookmark = null;
    } else if (storedHash) {
      this.setHash(storedHash);
    } else if (scale) {
      this.setScale(scale, true);
      this.page = 1;
    }
*/

啥也不说了，把该注释的注释了。一运行，可以了。

结果如图

5 看来投机还是有效果的，然而如果有些事情投机失败了，要怎么弄呢，预支一下烦恼。

使用PDF.js在网页显示pdf文件并跳转到指定页码

猜你喜欢