jquery在线pdf预览插件pdf.js文档手册

简介

和 Google Chrome 使用的源自 Foxit 的闭源 PDF 浏览插件不同，PDF.js 是基于开放的 HTML5 及 JavaScript 技术实现的开源产品。  pdf.js 是一个主要用于HTML5 平台上在线阅读PDF文档的小插件，基于JavaScript技术编写而成，无需任何本地技术支持。  pdf.js是由Mozilla Labs发布的。他们的目标是创建一个通用的，基于标准的网络平台，能够解析和渲染PDF文件，并最终发布一个PDF阅读器扩展，毫无疑问 pdf.js 将被整合入 Gecko 成为 Firefox 的内嵌 PDF 阅读器，但是具体整合时间表尚未确定

文件目录：

这两个文件夹核心文件就是build文件下的js文件，web文件是官方给写好的封装示例，你你可选择使用或者不使用。

├── LICENSE
├── build/
│   ├── pdf.js                             - 显示层
│   └── pdf.worker.js                      - 核心层
└── web/
    ├── cmaps/                             - 字符映射（由核心要求）
    ├── compressed.tracemonkey-pldi-09.pdf - 测试 pdf
    ├── debugger.js                        - 有帮助的PDF调试功能
    ├── images/                            - 观看者和注释图标的图像
    ├── l10n.js                            - 汉化
    ├── locale/                            - 翻译文件
    ├── viewer.css                         - viewer 页面样式
    ├── viewer.html                        - viewer 页面
    └── viewer.js                          - viewer js

使用pdf.js有两种方式：

• 第一种使用官方给写好的示例，简单来说就是上面提到的下载下来的web文件夹。

• 第二种就是自己调用API自己写方法实现，相对于第一种如果自己要的效果不是很多还是自己写。也不是很复杂很容易实现。官方给的代码太多修改维护太麻烦。

简单的来说一下吧，很多人可能下载之后直接打开会报错，其实那是因为出现了两个问题：第一个是没有文件，第二个是知道写文件但是存在跨域。就会产生如下错误：

出现这个问题其实也没事，只要我们引用到项目后就不会出现了。然后是我们在使用的地方打开这个页面并且加上文件即可：

window.location.href = "../../Content/js/PDFShow/padjs/web/viewer.html?file=pdfTest.pdf";

效果展示：

自己实现分页版：

我们自己实现的话就不需要web文件夹下的东西。你就可以删除了。

自己定义实现说起来也是很简单的，官方上已经给了很多代码示例了。废话我就不说了。我就上一下我的代码吧。

首先引入pdf.js文件到页面：

<script src="~/Content/js/PDFShow/padjs/build/pdf.js"></script>

引入pdf.js之后效果展示：

自己实现不分页版：

虽然分页很好用，但是确不一定使用所有的场景，比如我就是想一次性打开所有页面然后滚动查看跟读word似的，怎么办，有办法，当然是实现不分页喽，哈哈。

分页好理解啊：根据页数读取然后把读取的内容放到画布上就好了，既然我们明白分页的原理，那么我们稍稍改造一下就是不分页了吗。

不分页：我们全部读出来放到页面不就好了吗，简单来说是这个样，但是具体思路是=》我们先获取到所有页数，然后遍历的把每一页像分页一下放到画布上展示，然后在遍历相同数量画布来对应每页的内容，最后展现出来。

还是不要忘记引用js文件：

<script src="~/Content/js/PDFShow/padjs/build/pdf.js"></script>

页面布局就可以这样子了：