pdfJs开发心得

pdfjs 听名字，就知道是处理 pdf 的 js 。有多强大呢？现在流行的趋势是，在 html 中嵌入 ActiveX （如 adobe、金格、福昕等），而 pdfjs 完全不需要使用这些插件，用本身的解析技术即可展示 pdf 文件！而且是开源免费的，背景就不多说了，据说是某个大牛的工作室历时xxx年开发出来了。 具体效果是把 pdf 以 h5  canvas 画出来，双层 pdf 会以 div 把字嵌套（增加样式、做 pdf 功能的增加很方便的哟~）附图一张，省的说我骗人，有兴趣的就往下看~会说的很详细哟~不足的地方还请大家多提建议。博主第一次发博，强势求围观呀哈哈！！么么哒

前段时间应公司需求，开发使用 pdfjs 。查询国内、外的各种文档，没有什么有价值的东西，苦心钻研，现在需求开发完了，在这里总结一下

 pdfjs 下载路径可以直接百度或者在 github 上可以直接 down 下来， pdfjs 的目录结构在百度上也可以搜到的哟~这里就不重复浪费资源了

她不像一般的js代码，需要把她部署在工程下，启动服务，直接访问 http://IP:PORT/pdfjs/web/viewer.html 即可看到默认的 pdf 文件

重点来了：我们肯定不能专门搭一个服务器放一个这样的工程在里面，要把它集成在我们的工程里，这时候就会做一些重命名、重新放置文件目录等操作，千万不要动 它的默认名称！！！修改了默认名称后会影响部分功能，已知为搜索功能不好使；pdfjs自带搜索功能，会将搜索到的文字置顶，如果修改了，会导致将搜索到的文字所在的页数定位，但不会定位搜索的关键字！

关于pdfjs的嵌入

一般的页面形式，都会有专门的区域来加载控件，使用pdfjs时，我们可以使用 iframe ，使用div圈出一个 iframe 区域用于展示 pdf ，然后在这个 iframe 中嵌入 viewer.html （其实改成viewer.jsp也行强行修改后缀，较low， 不建议使用哟）

关于pdfjs 打开我们需要的 pdf 文件

查看 viewer.js 的源码，搜索 webViewerInitialized 方法，里面有 file = 'file' in params ? params.file: DEFAULT_URL;  params 是我们打开 viewer.html 传递的参数，仅需在打开时传入 &file="PATH" 即可

pdfjs 渲染

pdfjs 渲染时进会默认渲染6页内容，也就是说每当我们向上、下滚动滚轮时，仅有6页被加载出来，其它处于缓存状态。因此，pdfjs 的缺点之一就是会有渲染时间，虽然不会很久，但是也会影响用户体验。

在渲染时增加自定义方法

pdfjs 留了一个渲染时的自定义方法，在渲染时可以增加自己的操作，比如标注一些重点词汇等。由于页面是 html 的页面，因此增加一些 span 、 a、 div等标签也很方便，可以链到其它页面哟~在改变页面 html 布局的时候，一定要小心，因为没有深入了解过内部结构，一不小心就会影响其它功能。比如在标注重点词汇的时候，要在匹配到重点词汇时增加 span 标签（或其它）然后把该标签替换 原 div 中，否则会影响搜索。在跟源码js时，会发现搜索方法即为博主上述方法

pdfjs常用方法总结

搜索方法：

   //findType：find/findagain

  PDFViewerApplication.findController.executeCommand(findType, {

                query : searchStr,

                phraseSearch :true,

                caseSensitive :false,

                highlightAll :false,

                findPrevious : isNext

            });

跳转至某页：

    varpdfViewer = PDFViewerApplication.pdfViewer;

    pdfViewer.currentPageLabel = page;

   if(page !== pdfViewer.currentPageNumber.toString() && page !== pdfViewer.currentPageLabel) {

        PDFViewerApplication.toolbar.setPageNumber(pdfViewer.currentPageNumber, pdfViewer.currentPageLabel);

    }

获得总页数：

    varpdfViewer = PDFViewerApplication.pdfViewer;

   returnpdfViewer._pages.length;

注意事项：

1、pdfjs 自带缓存页数，当下次打开时会默认加载上次页数。屏蔽方法 找到 scrollIntoView 方法，return 前两次加载即可

2、当 pdf 文件大小不一时，会影响自定义跳页，因为 pdfjs 会根据选择页数进行渲染，当渲染时发现当前 pdf 页的大小跟之前的不一样，就会先渲染缩放比例，再次点击时才会跳转至该页，修改方法为找打 _setScaleUpdatePages 方法，当是自定义跳页时，直接执行

该方法即可