在线预览pdf文件（pdfJS）

时间：2025-02-20 21:25:33

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

1、下载：
下载链接：//
下载下来的压缩包包含两个文件夹：build和web，打开web文件夹下的，就能看到PDF的预览效果了。
预览的PDF文件是位于同目录下的，
而设置加载这个文件的地方是：与同目录下的的DEFAULT_URL属性，修改这个属性的值就能够预览不同的文件，中英文的pdf文件都能成功预览。

2、功能使用：
使用在web页展示pdf文件的关键是打开，也就是在web页打开一个html，可以用的方法至少有两三种：
a、a标签：使用展示pdf文件> b、：(“PDFJS\web\”); c、iframe：

3、在客户端预览服务器端的文件：使用文件流进行解决
以我此次使用的情况为例，我使用的iframe进行展示：
第一步：设置iframe的请求路径：
var src=“pdfjs/web/?file=/testWeb/”;

说明：
a、pdfjs/web/这个必须带，没什么可说的

b、若是从服务器端请求文件，必须使用file这个关键字，用来告知你这个是文件流。我是怎么知道的？百度+源码。看网上的demo时说要用这个关键字，我也纳闷你怎么知道要用这个关键字，就去看源码了，跟踪的过程中，发现的webViewerInitialized()的方法中有这么一句：
file = ‘file’ in params ? : ;
这就很明显了，你要是没有file我就使用默认值。所以必须用file关键字。

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

第三步：action请求：
Java代码

HttpServletResponse response = ();  
("application/pdf");  
FileInputStream in = new FileInputStream(pdfFile);  
OutputStream out = ();  
  
byte[] b = new byte[1024];  
while (((b)) != -1) {  
    (b);  
}  
();  
();  
();

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

4、带参数进行文件请求：
带参数的URL通常都这么写： ?id=123，
按照一般情况处理，此处应该是：var src=“pdfjs/web/?file=/testWeb/fileRouter!?id=123”;
按照这个路径去请求最后的请求链接会变成：http://127.0.0.1:8080/testWeb/?id，这样子的请求路径必然会报错，那么为什么会这样子呢？还是的webViewerInitialized()，里面处理链接的代码是这样子的：
Js代码

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

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

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

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

其实上面的例子存在一个问题，细心的可能已经发现了，那就是请求链接的问题：var src=“pdfjs/web/?file=/testWeb/fileRouter!?id=123”，一个url中不可能存在多个?，只有第一个参数用?其他的都用&，如果这个请求换成&号会怎么样，会不会就没有问题了呢？？
假设请求是这个样子的：var src=“pdfjs/web/?file=/testWeb/&id=123”，的webViewerInitialized()的执行结果就是：
Js代码

var appConfig = ;  
var file = void 0;  
var queryString = (1);  
//alert(queryString);//结果：file=/testWeb/&id=123  
var params = (0, _ui_utils.parseQueryString)(queryString);  
//alert();//结果：testWeb/  
file = 'file' in params ?  : ;  
validateFileURL(file);

最后就变成了没有参数。

接下来说解决办法，我觉得至少有两种：
第一种： parseQueryString()方法中起关键作用的是split("=")，带参数的时候因为有多个等号除第一个之外的其他都没干掉了，那么我若是保证这个url中只有file=这儿的一个等号呢，于是就可以改成：
var src = “pdfjs/web/?file=”+encodeURIComponent("/testWeb/?id=123");
如此就会变成：file=%2FtestWeb%2!%3Fid%3D123
最后的请求链接就是：http://127.0.0.1:8080/testWeb/fileRouter!?id=123，这样子的请求是正确的。

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

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

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

相关文章