最近弄的项目中需要在线展示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文件"这个主题涵盖了如何利用pdf.js库实现在Web环境中流畅、安全地预览PDF文档。pdf.js是Mozilla开发的一个开源项目,它允许开发者在浏览器端直接渲染PDF内容,无需...
描述:本文档详细介绍了使用pdf.js在Java web项目中远程预览FTP服务器上的PDF文件的方法。通过配置pdf.js插件和自定义servlet,可以实现在线预览远程FTP服务器上的PDF文件。 标签:pdf、ftp 知识点: ### 1. 远程...
总之,通过`pdf.js`,开发者可以轻松地在Android应用内部实现PDF文件的展示,提供用户友好的阅读体验。不过,需要注意的是,这种方法可能不如原生的PDF库(如Android PDF Library)那样高效,尤其是在处理大型或复杂...
PDF.js 是一个开源的JavaScript库,由Mozilla团队开发,用于在Web浏览器中渲染PDF文档,无需依赖任何外部插件。这个库的主要目标是提供一种在任何支持HTML5的浏览器上查看PDF文件的无缝体验,使得用户能够在网页上...
然后,我们需要在前端页面上使用pdf.js来加载和展示PDF文件。在HTML文件中,引入之前下载的`pdf.js`和`pdf.worker.js`,并创建一个用于显示PDF内容的`canvas`元素。这里假设你已经在项目的静态资源目录下存放了pdf....
PDF.js是Mozilla开发的一个开源库,它允许在Web浏览器中以纯JavaScript实现PDF文档的解析和渲染。这个库的目标是提供一个与浏览器无关、高质量的查看PDF文档的解决方案。在这个"pdf.js在web项目中的使用"的资源包中...
总的来说,通过使用PDF.js的文件流预览功能,开发者可以创建一个高效且兼容性强的Web应用,让用户在浏览器中流畅地预览PDF文件。这在处理大量或大尺寸PDF时尤其有益,因为它减少了内存占用,提高了加载速度。在实际...
PDF.js 是一个开源的JavaScript库,由Mozilla基金会开发,用于在Web浏览器中渲染PDF文档,无需依赖任何插件。它的核心目标是提供一种跨平台、跨浏览器的方式,让用户能够顺畅地查看PDF文件,提升Web应用的用户体验。...
总之,PDF.js和PDF.worker.js为Web开发者提供了强大的工具,能够在浏览器环境中无缝地处理PDF文件,而无需依赖外部插件。理解其工作原理和使用方法,可以帮助开发者创建功能丰富的PDF阅读应用。
PDF.js的核心功能在于解析PDF文件,并将其转化为可以在Web浏览器上渲染的图像序列。它支持多种浏览器,包括Chrome、Firefox、Safari和Internet Explorer。这个库的目的是提供一个跨平台、可定制的解决方案,使得用户...
为了优化性能,PDF.js可以使用Web Worker在后台线程中解析PDF文件,避免阻塞主线程。这可以提升用户体验,尤其是在处理大型或复杂PDF文件时。 6. 文档元数据与书签: PDF.js不仅可以渲染页面,还可以获取PDF的元...
"pdf.js打包文件"指的是将PDF.js的源码经过特定的构建过程,如使用Gulp的generic任务,打包成可以直接在Web项目中集成和使用的资源。 首先,让我们深入了解一下PDF.js的核心功能。PDF.js的主要目标是提供一个原生的...
总的来说,"H5在线展示pdf文件包"通过PDF.js库实现了在H5页面中无缝展示PDF文件的功能,使得用户无需离开网页或安装额外软件就能查看PDF内容。对于开发者而言,这是一个强大的工具,极大地丰富了Web应用的功能。
这个Demo展示了如何利用PDF.js库实现PDF在线预览和打印功能,同时还提供了页面缩放和打开本地PDF文件的能力。以下是关于这个项目的详细知识点: 1. **PDF.js基本概念**:PDF.js是一个JavaScript库,它解析PDF文件并...
`web` 目录是PDF.js的核心部分,它包含了用于在Web页面中展示PDF文件的所有资源。这个目录下通常会有以下内容: 1. `compatibility.js`: 用于解决不同浏览器之间JavaScript兼容性问题的脚本。 2. `viewer....
PDF.js是Mozilla开发的一个开源项目,它允许在Web浏览器中以纯JavaScript实现PDF文档的查看和渲染。这个项目的目标是提供一个与平台无关、高性能的PDF阅读器,使得用户无需离开浏览器就能方便地查看PDF文档。本文将...
Pdf.js是由Mozilla开发的一款开源JavaScript库,它允许在Web浏览器中直接预览PDF文件,而无需依赖任何其他第三方插件。其核心理念是将PDF解析为一系列的图像和文本元素,然后在浏览器的Canvas元素上绘制这些元素,...