1.简介

PDF.js 是基于开放的 HTML5 及 JavaScript 技术实现的开源产品。

pdf.js 是一个主要用于HTML5 平台上在线阅读PDF文档的小插件，基于JavaScript技术编写而成，无需任何本地技术支持。

pdf.js是由Mozilla Labs发布的。他们的目标是创建一个通用的，基于标准的网络平台，能够解析和渲染PDF文件



2.下载

$ git clone git://github.com/mozilla/pdf.js.git



3.构建

pdf.js 构建基于nodejs,因此需要安装nodejs。

安装nodejs后使用npm命令依次安装下列程序

  • npm install -g gulp-cli
  • npm install

在命令行输入gulp generic进行构建。

构建完成后将build\generic下的文件部署到web服务器上。 url访问到web/viwer.html即可浏览在线pdf.

viewer.html提供一个file参数，用于传入浏览的pdf的url.



4.注意

1.如果web服务器是iis，请添加.properties的MIME类型为application/octet-stream， 否则本地化无法启用，默认语言为英文。

2.pdf.js是不支持跨域文件加载的，比如你的页面地址为http://www.a.com, pdf地址为：http://www.b.com/my.pdf。 直接加载是不会成功的。会报  “file origin does not match viewer”错误。

分析一下源码：

var validateFileURL;
   var HOSTED_VIEWER_ORIGINS = [
    'null',
    'http://mozilla.github.io',
    'https://mozilla.github.io'
   ];
   validateFileURL = function validateFileURL(file) {
    try {
     var viewerOrigin = new URL(window.location.href).origin || 'null';
     if (HOSTED_VIEWER_ORIGINS.indexOf(viewerOrigin) >= 0) {
      return;
     }
     var fileOrigin = new URL(file, window.location.href).origin;
     if (fileOrigin !== viewerOrigin) {
      throw new Error('file origin does not match viewer\'s');
     }
    } catch (e) {
     var message = e && e.message;
     var loadingErrorMessage = mozL10n.get('loading_error', null, 'An error occurred while loading the PDF.');
     var moreInfo = { message: message };
     PDFViewerApplication.error(loadingErrorMessage, moreInfo);
     throw e;
    }
   };


首先，如果Viewer.html所在的主机是否在HOSTED_VIEWER_ORIGINS列表中定义，如果定义，则以下不检查同源。如果不存在，则检查同源。因此可以在将viewer.html所在的主机加到HOSTED_VIEWER_ORIGINS中即可实现跨域。  这样做比较安全。

如果部署觉得麻烦，暂不考虑安全性的话，可以在开头设置一个跨域标识位：

if(!CORS){
        validateFileURL(file);
    }


var CORS = true;表示支持跨域，不进行同源判断。

var CORS = true;表示不支持跨域，进行同源检测。

3.file参数中默认只允许传简单路径比如：http://www.a.com/file.php.   如果你要浏览的pdf路径为http://www.a.com/file.php?id=2001。 这时候直接传入的话会解析出错， 因为pdf.js无法判断id=2001是viewer.html的参数呢还是file.php的参数。

这时候我们要把参数file后传入的动态参数中特殊字符转义：

+

URL 中+号表示空格

%2B

空格

URL中的空格可以用+号或者编码

%20

/

分隔目录和子目录

  %2F

?

分隔实际的URL和参数

%3F

%

指定特殊字符

%25

#

表示书签

%23

&

URL 中指定的参数间的分隔符

%26

=

URL 中指定参数的值

%3D