首页 > 其他分享> > 在线预览pdf文件（pdfJS）

在线预览pdf文件（pdfJS）

2019-04-18 14:56:46 作者：互联网

在线预览pdf文件（pdfJS）

刚进公司实习第一天，组长就让我自己去实现在线展示PDF文件，看了看网上贴子也比较了一下pdfObiect（感兴趣的可以看看)，最终决定用pdf.js来实现预览功能。

使用pdfjs目的是为了打开pdf的文件，打开pdf文件有了两种方式，一种是直接打开pdf 的文件，一种是打开pdf 的文件流。传参的话，直接打开PDF文件很简单，这里就不赘述了；打开文件流会出现两个？，只需要在viewer.js文件中设置一下file可以了，然后就没有然后了。当然下面的实现方法只是一个参考，具体的实现有很多种，我在网上就看到很多大神的奇思妙想（还有的在后台直接拼接请求地址的），不过用到我这里的话感觉有点那啥了。。。

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：< iframe src="\web\viewer.html" />

3、在客户端预览服务器端的文件：使用文件流进行解决
以我此次使用的情况为例，我使用的iframe进行展示：
第一步：设置iframe的请求路径：
var src=“pdfjs/web/viewer.html?file=/testWeb/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关键字。

第二步：使用iframe进行请求：
$(“body”).append("<iframe width=“100%” height=“100%” src=’"+src+"’ />");

第三步：action请求：
Java代码

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通常都这么写： openDocInPdf.action?id=123，
按照一般情况处理，此处应该是：var src=“pdfjs/web/viewer.html?file=/testWeb/fileRouter!openDocInPdf.action?id=123”;
按照这个路径去请求最后的请求链接会变成：http://127.0.0.1:8080/testWeb/openDocInPdf.action?id，这样子的请求路径必然会报错，那么为什么会这样子呢？还是viewer.js的webViewerInitialized()，里面处理链接的代码是这样子的：
Js代码

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/openDocInPdf.action?id  
file = 'file' in params ? params.file : appConfig.defaultUrl;  
validateFileURL(file);

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

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/openDocInPdf.action&id=123”，viewer.js的webViewerInitialized()的执行结果就是：
Js代码

var appConfig = PDFViewerApplication.appConfig;  
var file = void 0;  
var queryString = document.location.search.substring(1);  
//alert(queryString);//结果：file=/testWeb/openDocInPdf.action&id=123  
var params = (0, _ui_utils.parseQueryString)(queryString);  
//alert(params.file);//结果：testWeb/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/openDocInPdf.action?id=123");
如此就会变成：file=%2FtestWeb%2!openDocInPdf.action%3Fid%3D123
最后的请求链接就是：http://127.0.0.1:8080/testWeb/fileRouter!openDocInPdf.action?id=123，这样子的请求是正确的。

第二种：改处理方法，人为的定义file中的值：
将webViewerInitialized()中处理参数的代码改成：
Js代码

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;  
1}  
validateFileURL(file);

然后iframe的src改成： var src=“pdfjs/web/viewer.html?file2=/testWeb/openDocInPdf.action?id=123”;
如此请求就会变成：http://127.0.0.1:8080/testWeb/openDocInPdf.action?id=123
至此，带参数的问题解决。

标签：预览,openDocInPdf,viewer,params,file,var,pdf,pdfJS
来源： https://blog.csdn.net/weixin_42526326/article/details/89378478