PDF整合到项目中的注意事项
这里主要介绍两个PDF展示方案：1.PDF.js 2.falsh 展示 pdf文件
Flash展示PDF文件
网上有很多pdf的flash展示工具组合，这里主要针对的是FlexPaper+swftools，FlexPaper是一个开源轻量级的文档浏览组件，被设计和比如PDF2SWF库（包含于SWFTools）一起工作，使得在网页上，Adobe Flex以及别的Flash的应用程序中显示和交互PDF文件成为可能。即，使得在没有安装PDF阅读器软件的情况下浏览PDF文件成为可能。
需要的工具
- Flexpaper:用于在页面上展现PDF的工具
- PDF2SWF：用于将PDF转化为swf格式的工具，swf是flash 可以展示的格式之一
转化流程
SWFTools工具包中的PDF2SWF工具可用来将PDF格式文件转换成SWF格式。使用下面的命令可以将pdf文件转换为swf文件。命令行方式调用
pdf2swf pdfPath –o swfPath –T 9 –f
pdf2swf为pdf2swf二进制命令的绝对路径；pdfpath为要进行转换的PDF文件的绝对路径；swfPath为转换后swf文件的路径；-T 9 用来设定转换的swf版本为9，这样设置是因为某些版本的swf文件并不能用flexpaper正常显示出来；-f,可以使搜索字符高亮显示。
编程实现pdf转化为swf格式
Runtime r = Runtime.getRuntime();
Process p = r.exec("F:/swftools/pdf2swf.exe " + pdfFile.getPath() + " -o " + swfFile.getPath() + " -f -T 9 "); //-T 代表flash的版本为9 ，否则可能会出现字符问题 -f是为了支持高亮搜索功能
在上面的例子中本机的pdf2swf程序是在 F:/swftools/pdf2swf.exe，可以根据实际情况调整
存储过程
把刚刚生成的xx.swf的文件存储到数据库，底层是通过将base64编码后的字符串存储到数据库完成
String pdfString = Pdfutil.PDFToBase64(new File(filePath));//base64转码
PDF数据的展示功能
首先在工程中需要导入以下三个部分：
1.css样式文件
2.flexpaper需要用到的JS文件，expressInstall.swf是用户flash版本过低后，adobe官方的flash版本升级的引导文件
3.FlexPaperViewer.swf是 pdf文档的展示模板文件（即pdf文件的展示窗口，窗口上有一些工具控件比如 搜索框和页码跳转框）
后台代码如下：
public void getPdf() throws Exception{
......................//查询参数设置
InputStream input =null;
OutputStream out =null;
req.setParameter("mongoDBCursor", mongoDBCursor);
String base64String = ServiceProxy.getDefault().execute(req).getResult();//查询出来的base64的字符串
try{
BASE64Decoder decoder = new sun.misc.BASE64Decoder();
byte[] decodeBuffer = decoder.decodeBuffer(base64String);
response.setStatus(HttpServletResponse.SC_OK);
response.setContentType("application/pdf;charset=utf-8");
input = new BufferedInputStream( new ByteArrayInputStream(decodeBuffer));
byte buffBytes[] = new byte[1024];
out = response.getOutputStream();
int read = 0;
while ((read = input.read(buffBytes)) != -1) {
out.write(buffBytes, 0, read);
}
out.flush();
}catch(Exception e){
System.out.println(e.getMessage());
throw new ServletException("pdf error");
}finally{
input.close();
out.close();
}
}
前台
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/ht-local.js"></script>
<link rel="stylesheet" type="text/css" href="test/flexpaper.css" />
<script type="text/javascript" src="test/jquery.min.js"></script>
<script type="text/javascript" src="test/flexpaper.js"></script>
<script type="text/javascript" src="test/flexpaper_handlers.js"></script>
</head>
<body>
<div style="position: absolute; left: 10px; top: 10px;">
<input value="${tokenId}" id="token"/>
<div id="documentViewer" class="flexpaper_viewer" style="width:770px;height:500px"></div>
<script type="text/javascript">
var token =$("#token").val();
$('#documentViewer').FlexPaperViewer(
{ config : {
SWFFile : escape('do?module=sys&action=Test&method=getPdf&tokenId='+token), 请求swf的路径
Scale : 0.6,
ZoomTransition : 'easeOut',
ZoomTime : 0.5,
ZoomInterval : 0.2,
FitPageOnLoad : false,
FitWidthOnLoad : true,
FullScreenAsMaxWindow : false,
ProgressiveLoading : false,
MinZoomSize : 0.2,
MaxZoomSize : 5,
SearchMatchAll : false,
InitViewMode : 'Portrait',
RenderingOrder : 'flash',
StartAtPage : '',
ViewModeToolsVisible : true,
ZoomToolsVisible : true,
NavToolsVisible : true,
CursorToolsVisible : true,
SearchToolsVisible : true,
WMode : 'window',
localeChain: 'en_US'
}}
);
</script>
</div>
</body>
</html>
官网的flexPaper的例子有两个问题
- 可以打印PDF,实际项目不需要这个功能
- 展示PDF时会有公司Logo的问题
解决上述问题的方式是将官网的FlexPaperViewer.swf替换为网上修改后的FlexPaperViewer.swf的文件，CSDN上就有相应的资源，就可以解决了上述问题。
展示效果
PDFJS的研究使用
PDF.js是一个由HTML5建立的PDF阅读器。依托开源社区驱动和Mozilla实验室的技术支持。目标是建立一个通用的，基于web的解析和渲染PDF文件的平台。对比与Flash展示PDF文件的方案，该方案只要浏览器支持html5技术即可，并不要求浏览器安装pdf的任何插件，完全用Js渲染pdf的展示页面，所以对计算机性能有一定要求。官网上其对主流浏览器的支持性如下图，IE系列最低支持ie9 以上版本
项目路径
如图中所示，要在webContent目录下导入从网上下载的pdf.js的资源包。
存储过程
将pdf文件以base64的编码存储到数据库中
PDF数据的展示功能
展示页面需要导入以下js:
<script type="text/javascript" src="test/jquery.min.js"></script>
<script type="text/javascript" src="pdf/generic/web/compatibility.js"></script>//用于解决低版本的浏览器的兼容性问题
<script type="text/javascript" src="pdf/generic/build/pdf.js"></script>
<script type="text/javascript" src="pdf/generic/build/pdf.worker.js"></script>
页面上：
<button value="viewpdf" id="pdfClick1" />//触发查询的按钮
<iframe id="iframePreview" width='100%' height='900px' style="border:0px solid red" ></iframe>//展现pdf的框架
$("#pdfClick1").click(function(){
var tmpUrl ="pdf/generic/web/viewer.html?file="+encodeURIComponent("/htcdr2/do?module=sys&action=Test&method=getPdf5&tokenId="+"${tokenId}");//对url进行编码，解决url中的特殊字符问题，file= 后的东西为要查询的pdf的路径或url,需要手动指定
$("#iframePreview").attr("src", tmpUrl);
})
后台和Flash展示PDF文件的方案一样，同样采用流的方式查询，可以参照上面的代码
展现效果
同样这里也可以隐藏打印和下载功能
两者的对比
PDF.js
- 优点：不需要浏览器下载Pdf插件，客户电脑不需要任何pdf的环境，开源免费
- 缺点：导入js文件有点大，导致等待时间可能较长；需要浏览器支持HTML5技术，对低版本浏览器支持度不够；渲染pdf时，需要占用一定的CPU资源
FLASH展现PDF
- 优点：对低版本浏览器支持度很高，对计算机性能要求不高
- 缺点：需要将浏览器安装adobe 的flash 插件，免费版要求pdf的页数最多十页;pdf需要转换成swf格式，才能被flash显示；