`

使用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标签:<a href="PDFJS\web\viewer.html">使用pdf.js展示pdf文件</>

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

c、iframe:<iframe  src="PDFJS\web\viewer.html" />

 

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("<iframe  width=\"100%\" height=\"100%\" src='"+src+"' />");

 

第三步: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

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

分享到:
评论

相关推荐

    Java web使用pdf.js在线预览远程服务器上的pdf文件

    "Java Web使用pdf.js在线预览远程服务器上的pdf文件"这个主题涵盖了如何利用pdf.js库实现在Web环境中流畅、安全地预览PDF文档。pdf.js是Mozilla开发的一个开源项目,它允许开发者在浏览器端直接渲染PDF内容,无需...

    pdf.js在java web项目中远程预览ftp上的pdf文件.docx

    描述:本文档详细介绍了使用pdf.js在Java web项目中远程预览FTP服务器上的PDF文件的方法。通过配置pdf.js插件和自定义servlet,可以实现在线预览远程FTP服务器上的PDF文件。 标签:pdf、ftp 知识点: ### 1. 远程...

    基于pdf.js在android内部显示pdf文件

    总之,通过`pdf.js`,开发者可以轻松地在Android应用内部实现PDF文件的展示,提供用户友好的阅读体验。不过,需要注意的是,这种方法可能不如原生的PDF库(如Android PDF Library)那样高效,尤其是在处理大型或复杂...

    pdf.js文件下载

    PDF.js 是一个开源的JavaScript库,由Mozilla团队开发,用于在Web浏览器中渲染PDF文档,无需依赖任何外部插件。这个库的主要目标是提供一种在任何支持HTML5的浏览器上查看PDF文件的无缝体验,使得用户能够在网页上...

    SpringBoot采用pdf.js加载pdf文件

    然后,我们需要在前端页面上使用pdf.js来加载和展示PDF文件。在HTML文件中,引入之前下载的`pdf.js`和`pdf.worker.js`,并创建一个用于显示PDF内容的`canvas`元素。这里假设你已经在项目的静态资源目录下存放了pdf....

    pdf.js在web项目中的使用

    PDF.js是Mozilla开发的一个开源库,它允许在Web浏览器中以纯JavaScript实现PDF文档的解析和渲染。这个库的目标是提供一个与浏览器无关、高质量的查看PDF文档的解决方案。在这个"pdf.js在web项目中的使用"的资源包中...

    pdf.js使用文件流预览pdf

    总的来说,通过使用PDF.js的文件流预览功能,开发者可以创建一个高效且兼容性强的Web应用,让用户在浏览器中流畅地预览PDF文件。这在处理大量或大尺寸PDF时尤其有益,因为它减少了内存占用,提高了加载速度。在实际...

    pdf.js和pdf.worker.js

    总之,PDF.js和PDF.worker.js为Web开发者提供了强大的工具,能够在浏览器环境中无缝地处理PDF文件,而无需依赖外部插件。理解其工作原理和使用方法,可以帮助开发者创建功能丰富的PDF阅读应用。

    pdf.js&pdf;.worker.js

    PDF.js 是一个开源的JavaScript库,由Mozilla基金会开发,用于在Web浏览器中渲染PDF文档,无需依赖任何插件。它的核心目标是提供一种跨平台、跨浏览器的方式,让用户能够顺畅地查看PDF文件,提升Web应用的用户体验。...

    pdf.js和pdf.worker.js html打开pdf所需要的js

    PDF.js的核心功能在于解析PDF文件,并将其转化为可以在Web浏览器上渲染的图像序列。它支持多种浏览器,包括Chrome、Firefox、Safari和Internet Explorer。这个库的目的是提供一个跨平台、可定制的解决方案,使得用户...

    pdf.js打包文件

    "pdf.js打包文件"指的是将PDF.js的源码经过特定的构建过程,如使用Gulp的generic任务,打包成可以直接在Web项目中集成和使用的资源。 首先,让我们深入了解一下PDF.js的核心功能。PDF.js的主要目标是提供一个原生的...

    pdf.js读取pdf文档

    为了优化性能,PDF.js可以使用Web Worker在后台线程中解析PDF文件,避免阻塞主线程。这可以提升用户体验,尤其是在处理大型或复杂PDF文件时。 6. 文档元数据与书签: PDF.js不仅可以渲染页面,还可以获取PDF的元...

    pdf.js压缩文件

    `web` 目录是PDF.js的核心部分,它包含了用于在Web页面中展示PDF文件的所有资源。这个目录下通常会有以下内容: 1. `compatibility.js`: 用于解决不同浏览器之间JavaScript兼容性问题的脚本。 2. `viewer....

    H5自动展示pdf文件,pdf.js

    总的来说,"H5在线展示pdf文件包"通过PDF.js库实现了在H5页面中无缝展示PDF文件的功能,使得用户无需离开网页或安装额外软件就能查看PDF内容。对于开发者而言,这是一个强大的工具,极大地丰富了Web应用的功能。

    pdf.js Demo 纯js实现PDF在线预览及打印

    这个Demo展示了如何利用PDF.js库实现PDF在线预览和打印功能,同时还提供了页面缩放和打开本地PDF文件的能力。以下是关于这个项目的详细知识点: 1. **PDF.js基本概念**:PDF.js是一个JavaScript库,它解析PDF文件并...

    pdf.js最新资源下载

    PDF.js是Mozilla开发的一个开源项目,它允许在Web浏览器中以纯JavaScript实现PDF文档的查看和渲染。这个项目的目标是提供一个与平台无关、高性能的PDF阅读器,使得用户无需离开浏览器就能方便地查看PDF文档。本文将...

    小程序预览PDF文件插件Pdf.js

    Pdf.js是由Mozilla开发的一款开源JavaScript库,它允许在Web浏览器中直接预览PDF文件,而无需依赖任何其他第三方插件。其核心理念是将PDF解析为一系列的图像和文本元素,然后在浏览器的Canvas元素上绘制这些元素,...

Global site tag (gtag.js) - Google Analytics