js学习笔记]PDF.js专题

前言

    英文是github上的原文，找不到中文资料，我根据自己理解翻译的，有些词意思拿不准就直接把单词留在原地了，看这个文档应该可以凑合着用了。

PDF.js是什么

    PDF.js is a Portable Document Format(PDF) viewer that is built with HTML5.PDF.js is community-driven and supportedby Mozilla Labs. Our goal is to create a general-purpose, web standards-basedplatform for parsing and rendering PDFs.

    PDF.js是一个由HTML5建立的PDF阅读器。依托开源社区驱动和Mozilla实验室的技术支持。目标是建立一个通用的，基于web的解析和渲染PDF文件的平台。https://github.com/ChineseDron/pdf.js# 是从Mozilla原版中fork出来的一个版本，原版的链接在这里https://github.com/mozilla/pdf.js 原版的版次新一些，我们用原版。

PDF.js怎么用

    首先看一个demo：http://mozilla.github.io/pdf.js/web/viewer.html

    这个viewer我觉得就是PDF.js的最终UI。根据以往经验，网上能下载的demo，从来就没有见过能正常运行的，不过我还是抱着侥幸试了一下，PDF.js果然也不例外。从github上面我们可以下载PDF.js项目源代码，examples里有几个demo示例，helloworld运行就报错，此处省略研究过程1W字，大家只用看结论就可以了：IE9报错就升级的IE10，我也是试出来的，这个时候还不知道原因。其他的demo示例运行不是页面全黑就是全白，可以直接删了。

    Mozilla有一个比较简单的Pre-built版demo程序，改造一下就可以用了。

2.1 demo程序的结构翻译

2.2 我想只要满足下面两个要求就算大家可以用了

1.打开任意想打开的pdf文件（这就是github上的FAQ的第一个问题）

2.能够通过.net后台动态的控制与打开pdf有关的参数

第一个问题：

我们只用修改viewer.js文件中的pdf路径参数即可：

var DEFAULT_URL = '09.pdf';

如果pdf文件与viewer.html不在一层目录中，改成相对路径即可：

var DEFAULT_URL = ' ../doc/ 09.pdf';

第二个问题：

viewer.html可以通过页面参数传值的方式加载pdf文件，比如我们想打开09.pdf文件的话，只需要这样：

先把viewer.js中的参数修改为空：

var DEFAULT_URL = '';

然后把url改写为参数传值：

http://localhost:54175/PDFJSInNet/web/viewer.html?file=09.pdf

如果pdf文件与viewer.html不在一层目录中，改成相对路径即可：

http://localhost:54175/PDFJSInNet/web/viewer.html?file=../doc/09.pdf

非常容易通过Visual Studio控制后台代码动态拼出这样一个url字符串。

2.3 补充

viewer的demo程序示例的toolbar工具比较全，第二个是打印第三个是下载，如果我们只想做在线阅读，不许用户打印或者下载文档的话，把这两个按钮隐藏掉或者删掉即可，在viewer.html源码第180行186行

2.4 再补充

    viewer在解析和渲染pdf的时候有点耗费系统资源，尤其是cpu资源，不知道是不是因为我的本子配置较低的缘故，在页面加载等待的过程中，IE进程消耗掉了CPU资源的50-60%。点击翻页操作，或者改变IE的窗口大小会触发viewer对pdf进行重新解析和渲染。有时把IE前端的某个挡住他的程序窗口（比如一个txt）移开也会导致重新渲染，但是并不是每次都会触发，原因不详。

    如果在viewer解析和渲染的过程中尝试用adobe reader之类的工具打开那个pdf文件，系统会出现第二个iexplore.exe *32的进程，有时是AcroRd32.exe *32进程，两个进程加一起几乎耗去了100%的CPU资源，此时机器已经显得比较卡了。多点两下就会出现页面未响应，但是一般情况下是假死，等几秒就会活过来，我试了很多次还没有遇到真死的情况。

    我用一个7M大的PDF测试了一下速度，能感觉出解析和渲染的时间变长了，但是时间还没有长到不能忍受（FAQ里的最后一个问题有提到）

官方上的FAQ

我只选取了我认为可以用得到的问题。

Can Ispecify a different PDF in the default viewer?可以指定一个不同的PDF文件给viewer打开吗？

You canmodify the DEFAULT_URL variable in the web/viewer.js file or you can append the ?file= query string to the viewer URL, e.g.http://mozilla.github.com/pdf.js/web/viewer.html?file=compressed.tracemonkey-pldi-09.pdf.

在2.2章节已经回答了。

Can I load a PDF fromanother server (cross domain request)?能否从其它服务器读取pdf文件（跨域访问）?

Notby default, but it is possible. PDF.js runs with the same permissions as anyother JavaScript code, which means it cannot do cross origin requests (see Same origin policy and an example).There are some possible ways to get around this such as using CORS (seealso unsafeheaders issue and Access-Control-Expose-Headersissue) or setting up a proxy on your server thatwill feed PDF.js the PDF file. Both workarounds are out of the scope of thePDF.js project and we will not provide code to do either.

不默认，但它是可能的。 PDF.js运行具有相同权限的任何其他JavaScript代码，这意味着它不能跨出自身请求（见同根同源的政策和示例） 。有一些可能的方法来解决这个问题，如使用CORS (seealso unsafe headers issue and Access-Control-Expose-Headersissue)，或者设置你的服务器上的代理，将PDF文件提供给PDF.js。这两种解决方法都出了PDF.js项目的范围，我们将不提供代码，请执行。

What browsers are supported?支持哪些浏览器?

The goal is to support all HTML5 compliant browsers, but sincefeature support varies per browser/version our support for all PDF featuresvaries as well. If you want to support more browsers than Firefox you'll needto include compatibility.jswhich has polyfills for missing features. Find the list offeatures needed for PDF.js to properly work and browser tests for thosefeatures at RequiredBrowser Features. In general, the support is below:

我们的目标是支持所有HTML5兼容的浏览器，但是每个浏览器/版本对PDF的所有特性的支持是不同的。如果你想支持除了Firefox以外的更多种浏览器，你需要有compatibility.js文件，它有polyfills丢失的功能。想查找PDF.js正常工作所需的浏览器的测试要求，请参考如下浏览器特性的列表：