使用pdf.js在web页面展示pdf文件

最近弄的项目中需要在线展示PDF文件，以前用的是Adobe PDF阅读器直接在浏览器端打开的，这要求客户端必须安装这个软件，若是没有安装就不能在线预览了。为了解决这个问题，最终决定用pdf.js来实现预览功能。

 

1、PDF.js下载：

下载链接：http://mozilla.github.io/pdf.js/

下载下来的压缩包包含两个文件夹：build和web，打开web文件夹下的viewer.html，就能看到PDF的预览效果了。

预览的PDF文件是位于viewer.html同目录下的compressed.tracemonkey-pldi-09.pdf，

而设置加载这个文件的地方是：与viewer.html同目录下的viewer.js的DEFAULT_URL属性，修改这个属性的值就能够预览不同的文件，中英文的pdf文件都能成功预览。

 

2、功能使用：

使用pdf.js在web页展示pdf文件的关键是打开viewer.html，也就是在web页打开一个html，可以用的方法至少有两三种：

a、a标签：使用pdf.js展示pdf文件

b、window.open：window.open("PDFJS\web\viewer.html");

c、iframe：

 

3、在客户端预览服务器端的文件：使用文件流进行解决

以我此次使用的情况为例，我使用的iframe进行展示：

第一步：设置iframe的请求路径：

var src="pdfjs/web/viewer.html?file=/testWeb/fileRouter!openDocInPdf.action";

 

说明：

a、pdfjs/web/viewer.html这个必须带，没什么可说的

 

b、若是从服务器端请求文件，必须使用file这个关键字，用来告知pdf.js你这个是文件流。我是怎么知道的？百度+源码。看网上的demo时说要用这个关键字，我也纳闷你怎么知道要用这个关键字，就去看源码了，跟踪的过程中，发现viewer.js的webViewerInitialized()的方法中有这么一句：

file = 'file' in params ? params.file : appConfig.defaultUrl;

这就很明显了，你要是没有file我就使用默认值。所以必须用file关键字。

 

c、testWeb是我的项目名称，在此处请求action时必须加上：/项目名称。不这么处理会报404（至少我这块儿是这样子）。

怎么个404？？假设我的项目访问路径为：http://127.0.0.1:8080/testWeb，

若写成 file=/testWeb/fileRouter!openDocInPdf.action，（上面说的写法）

那么请求路径就是:http://127.0.0.1:8080/testWeb/fileRouter!openDocInPdf.action，正确

若写成 file=fileRouter!openDocInPdf.action （不加上/testWeb）

那么请求路径：http://127.0.0.1:8080/fileRouter!openDocInPdf.action （404）

或者写成：file=/fileRouter!openDocInPdf.action（不加上testWeb，只加了/）

请求路径：http://127.0.0.1:8080/fileRouter!openDocInPdf.action （404）

 

第二步： 使用iframe进行请求：

$("body").append("");

 

第三步：action请求：

HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("application/pdf");
FileInputStream in = new FileInputStream(pdfFile);
OutputStream out = response.getOutputStream();

byte[] b = new byte[1024];
while ((in.read(b)) != -1) {
	out.write(b);
}
out.flush();
in.close();
out.close();

当然在实际应用中，经常牵涉到带参数的问题，这就是后面要说的第四个点了。

 

4、带参数进行文件请求：

带参数的URL通常都这么写： fileRouter!openDocInPdf.action?id=123，

按照一般情况处理，此处应该是：var src="pdfjs/web/viewer.html?file=/testWeb/fileRouter!openDocInPdf.action?id=123";

按照这个路径去请求最后的请求链接会变成：http://127.0.0.1:8080/testWeb/fileRouter!openDocInPdf.action?id，这样子的请求路径必然会报错，那么为什么会这样子呢？还是viewer.js的webViewerInitialized()，里面处理链接的代码是这样子的：

var appConfig = PDFViewerApplication.appConfig;
var file = void 0;
var queryString = document.location.search.substring(1);
//alert(queryString);//结果：file=/testWeb/fileRouter!openDocInPdf.action?id=123，
var params = (0, _ui_utils.parseQueryString)(queryString);
//alert(params.file);//结果：testWeb/fileRouter!openDocInPdf.action?id
file = 'file' in params ? params.file : appConfig.defaultUrl;
validateFileURL(file);

 看结果就知道问题出在第四行，第四行的parseQueryString方法如下：

function parseQueryString(query) {
  var parts = query.split('&');
  var params = Object.create(null);
  for (var i = 0, ii = parts.length; i < ii; ++i) {
    var param = parts[i].split('=');
    var key = param[0].toLowerCase();
    var value = param.length > 1 ? param[1] : null;
    params[decodeURIComponent(key)] = decodeURIComponent(value);
  }
  return params;
}

这下应该知道请求链接为什么会变成那个样子了。

 

其实上面的例子存在一个问题，细心的可能已经发现了，那就是请求链接的问题：var src="pdfjs/web/viewer.html?file=/testWeb/fileRouter!openDocInPdf.action?id=123"，一个url中不可能存在多个?，只有第一个参数用?其他的都用&，如果这个请求换成&号会怎么样，会不会就没有问题了呢？？

假设请求是这个样子的：var src="pdfjs/web/viewer.html?file=/testWeb/fileRouter!openDocInPdf.action&id=123"，viewer.js的webViewerInitialized()的执行结果就是：

var appConfig = PDFViewerApplication.appConfig;
var file = void 0;
var queryString = document.location.search.substring(1);
//alert(queryString);//结果：file=/testWeb/fileRouter!openDocInPdf.action&id=123
var params = (0, _ui_utils.parseQueryString)(queryString);
//alert(params.file);//结果：testWeb/fileRouter!openDocInPdf.action
file = 'file' in params ? params.file : appConfig.defaultUrl;
validateFileURL(file);

最后就变成了没有参数。

 

接下来说解决办法，我觉得至少有两种：

第一种： parseQueryString()方法中起关键作用的是split("=")，带参数的时候因为有多个等号除第一个之外的其他都没干掉了，那么我若是保证这个url中只有file=这儿的一个等号呢，于是就可以改成：

var src = "pdfjs/web/viewer.html?file="+encodeURIComponent("/testWeb/fileRouter!openDocInPdf.action?id=123");

如此就会变成：file=%2FtestWeb%2FfileRouter!openDocInPdf.action%3Fid%3D123

最后的请求链接就是：http://127.0.0.1:8080/testWeb/fileRouter!openDocInPdf.action?id=123，这样子的请求是正确的。

 

第二种：改处理方法，人为的定义file中的值：

将webViewerInitialized()中处理参数的代码改成：

  var appConfig = PDFViewerApplication.appConfig;
  var file = void 0;
  var queryString = document.location.search.substring(1);
  /*注释掉原来的参数处理方法
  var params = (0, _ui_utils.parseQueryString)(queryString);
  file = 'file' in params ? params.file : appConfig.defaultUrl;
  */
  //使用一下的代码进行处理
  if(queryString.split("file2=").length>0){
  	file = queryString.split("file2=")[1];
  }else{
  	file = appConfig.defaultUrl;
  }
  validateFileURL(file);

然后iframe的src改成： var src="pdfjs/web/viewer.html?file2=/testWeb/fileRouter!openDocInPdf.action?id=123";

如此请求就会变成：http://127.0.0.1:8080/testWeb/fileRouter!openDocInPdf.action?id=123

至此，带参数的问题解决。