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
});
跳转至某页：
var
pdfViewer = PDFViewerApplication.pdfViewer;
pdfViewer.currentPageLabel = page;
if
(page !== pdfViewer.currentPageNumber.toString() && page !== pdfViewer.currentPageLabel) {
PDFViewerApplication.toolbar.setPageNumber(pdfViewer.currentPageNumber, pdfViewer.currentPageLabel);
}
获得总页数：
var
pdfViewer = PDFViewerApplication.pdfViewer;
return
pdfViewer._pages.length;
注意事项：
1、pdfjs 自带缓存页数，当下次打开时会默认加载上次页数。屏蔽方法 找到 scrollIntoView 方法，return 前两次加载即可
2、当 pdf 文件大小不一时，会影响自定义跳页，因为 pdfjs 会根据选择页数进行渲染，当渲染时发现当前 pdf 页的大小跟之前的不一样，就会先渲染缩放比例，再次点击时才会跳转至该页，修改方法为找打 _setScaleUpdatePages 方法，当是自定义跳页时，直接执行
该方法即可
转载请注明原文地址: https://ju.6miu.com/read-668549.html
