1、概述
1.1 主要原理：
1.通过第三方工具openoffice，将word、excel、ppt、txt等文件转换为pdf文件
2.通过swfTools将pdf文件转换成swf格式的文件
3.通过FlexPaper文档组件在页面上进行展示
1.2 安装包下载
1.openoffice是Apache下的一个开放免费的文字处理软件
下载地址：Apache oppenoffice 官网下载 版本-3.4.1
2.SWFTools是一组用来处理Flash的swf文件的工具包，我们使用它将pdf文件转成swf文件!
下载地址：SWFTools官网下载 swftools-2013-04-09-1007.exe
3.FlexPaper是一个开源轻量级的在浏览器上显示各种文档的组件
4.JODConverter一个Java的OpenDocument 文件转换器，该工具包会用到调用openoffice，实现将word、excel、ppt、txt等文件转换为pdf文件。在此我们只用到它的jar包。
下载地址：JODCConverter下载
1.3 安装文件
1.将所下载的文件（JODConverter除外）进行安装，盘符可随自己设定！需要注意的是在openoffice安装完成后，当我们使用它时，需将它的服务打开。在次我们需要以命令的方式打开:
打开dos窗口，进入openoffice安装盘符，输入以下代码来启动服务：
soffice -headless -accept=”socket,host=127.0.0.1,port=8100;urp;” -nofirststartwizard
注意最后一个命令前边的‘—’,可不要写错！服务起不来，项目可是继续不下去的哦.
官网启动服务截图如下：
本地截图：
2、开发过程
2.1 新建项目
将flexpaper文件中的js文件夹(包含了flexpaper_flash_debug.js，flexpaper_flash.js,jquery.js,这三个js文件主要是预览swf文件的插件)拷贝至网站根目录;将FlexPaperViewer.swf拷贝至网站根目录下(该文件主要是用在网页中播放swf文件的播放器)，目录结构如下图：
注：需创建upload文件夹
2.2 创建fileUpload.jsp
-
<%@ 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”>
-
<title>文档在线预览系统
</title>
-
<style>
-
body {
margin-top:
100px;
background:
#fff;
font-family: Verdana, Tahoma;}
-
a {
color:
#CE4614;}
-
#msg-box {
color:
#CE4614;
font-size:
0.9em;
text-align:center;}
-
#msg-box
.logo {
border-bottom:
5px solid
#ECE5D9;
margin-bottom:
20px;
padding-bottom:
10px;}
-
#msg-box
.title {
font-size:
1.4em;
font-weight:bold;
margin:
0
0
30px
0;}
-
#msg-box
.nav {
margin-top:
20px;}
-
</style>
-
-
</head>
-
<body>
-
<div id=“msg-box”>
-
<form name=“form1” method=“post” enctype=“multipart/form-data” action=“docUploadConvertAction.jsp”>
-
<div class=“title”>
-
请上传要处理的文件，过程可能需要几分钟，请稍候片刻。
-
</div>
-
<p>
-
<input name=“file1” type=“file”>
-
</p>
-
<p>
-
<input type=“submit” name=“Submit” value=“上传”>
-
</p>
-
</form >
-
</div>
-
</body>
-
</html>
2.3 创建转换页docUploadConvertAction.jsp
-
01.
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
-
02.
-
03.
<%@page import="java.io.*"%>
-
04.
<%@page import="java.util.Enumeration"%>
-
05.
<%@page import="com.oreilly.servlet.MultipartRequest"%>
-
06.
<%@page import="com.oreilly.servlet.multipart.DefaultFileRenamePolicy"%>
-
07.
<%@page import="com.cectsims.util.DocConverter"%>
-
08.
<%
-
09.//文件上传采用
cos组件上传，可更换为
commons-fileupload上传，文件上传后，保存在
upload文件夹
-
10.//获取文件上传路径
-
11.String
saveDirectory =
application.getRealPath("/")+"
upload";
-
12.//打印上传路径信息
-
13.System.out.println(
saveDirectory);
-
14.//每个文件最大
50m
-
15.int
maxPostSize =
50 *
1024 *
1024 ;
-
16.//采用
cos缺省的命名策略，重名后加
1,
2,
3...如果不加
dfp重名将覆盖
-
17.DefaultFileRenamePolicy
dfp =
new
DefaultFileRenamePolicy();
-
18.//
response的编码为"
UTF-8",同时采用缺省的文件名冲突解决策略,实现上传,如果不加
dfp重名将覆盖
-
19.MultipartRequest
multi =
new
MultipartRequest(
request,
saveDirectory,
maxPostSize,"
UTF-8",
dfp);
-
20.//
MultipartRequest
multi =
new
MultipartRequest(
request,
saveDirectory,
maxPostSize,"
UTF-8");
-
21.//输出反馈信息
-
22.
Enumeration
files =
multi.getFileNames();
-
23.
while (
files.hasMoreElements()) {
-
24.
System.err.println("
ccc");
-
25.
String
name =
(String)files.nextElement();
-
26.
File
f =
multi.getFile(name);
-
27.
if(
f!=
null){
-
28.
String
fileName =
multi.getFilesystemName(name);
-
29. //获取上传文件的扩展名
-
30.
String
extName=
fileName.substring(fileName.lastIndexOf("
.")+
1);
-
31. //文件全路径
-
32.
String
lastFileName=
saveDirectory+"\\" +
fileName;
-
33. //获取需要转换的文件名,将路径名中的'\'替换为'/'
-
34.
String
converfilename =
saveDirectory.replaceAll("\\\\", "/")+"/"+
fileName;
-
35.
System.out.println(
converfilename);
-
36. //调用转换类
DocConverter,并将需要转换的文件传递给该类的构造方法
-
37.
DocConverter
d =
new
DocConverter(
converfilename);
-
38. //调用
conver方法开始转换，先执行
doc2pdf()将
office文件转换为
pdf;再执行
pdf2swf()将
pdf转换为
swf;
-
39.
d.conver();
-
40. //调用
getswfPath()方法，打印转换后的
swf文件路径
-
41.
System.out.println(
d.getswfPath());
-
42. //生成
swf相对路径，以便传递给
flexpaper播放器
-
43.
String
swfpath =
"upload"+
d.getswfPath()
.substring(
d.getswfPath()
.lastIndexOf("/"));
-
44.
System.out.println(
swfpath);
-
45. //将相对路径放入
sessio中保存
-
46.
session.setAttribute("
swfpath",
swfpath);
-
47.
out.println("上传的文件
:"+
lastFileName);
-
48.
out.println("文件类型"+
extName);
-
49.
out.println("<
hr>");
-
50. }
-
51. }
-
52.
-
53.%>
-
54.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
-
55.
<html>
-
56.
<head>
-
57.
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-
58.
<title>Insert title here
</title>
-
59.
<style>
-
60.
body {
margin-top:
100px;
background:
#fff;
font-family: Verdana, Tahoma;}
-
61.
a {
color:
#CE4614;}
-
62.
#msg-box {
color:
#CE4614;
font-size:
0.9em;
text-align:center;}
-
63.
#msg-box
.logo {
border-bottom:
5px solid
#ECE5D9;
margin-bottom:
20px;
padding-bottom:
10px;}
-
64.
#msg-box
.title {
font-size:
1.4em;
font-weight:bold;
margin:
0
0
30px
0;}
-
65.
#msg-box
.nav {
margin-top:
20px;}
-
66.
</style>
-
67.
</head>
-
68.
<body>
-
69.
<div>
-
70.
<form name="viewForm" id="form_swf" action="documentView.jsp" method="POST">
-
71.
<input type='submit' value='预览' class='BUTTON SUBMIT'/>
-
72.
</form>
-
73.
</div>
-
74.
</body>
-
75.
</html>
2.4 创建查看页documentView.jsp
-
01.
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
-
02.
<%
-
03.
String
swfFilePath=
session.getAttribute("
swfpath")
.toString();
-
04.%>
-
05.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
-
06.
<html>
-
07.
<head>
-
08.
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-
09.
<script type="text/javascript" src="js/jquery.js">
</script>
-
10.
<script type="text/javascript" src="js/flexpaper_flash.js">
</script>
-
11.
<script type="text/javascript" src="js/flexpaper_flash_debug.js">
</script>
-
12.
<style type="text/css" media="screen">
-
13.
html,
body {
height:
100%; }
-
14.
body {
margin:
0;
padding:
0;
overflow:auto; }
-
15.
#flashContent {
display:none; }
-
16.
</style>
-
17.
-
18.
<title>文档在线预览系统
</title>
-
19.
</head>
-
20.
<body>
-
21.
<div style="position:absolute;left:50px;top:10px;">
-
22.
<a id="viewerPlaceHolder" style="width:820px;height:650px;display:block">
</a>
-
23.
-
24.
<script type="text/javascript">
-
25.
var fp =
new FlexPaperViewer(
-
26.
'FlexPaperViewer',
-
27.
'viewerPlaceHolder', {
config : {
-
28. SwfFile :
escape(
'<%=swfFilePath%>'),
-
29. Scale :
0.6,
-
30. ZoomTransition :
'easeOut',
-
31. ZoomTime :
0.5,
-
32. ZoomInterval :
0.2,
-
33. FitPageOnLoad :
true,
-
34. FitWidthOnLoad :
false,
-
35. FullScreenAsMaxWindow :
false,
-
36. ProgressiveLoading :
false,
-
37. MinZoomSize :
0.2,
-
38. MaxZoomSize :
5,
-
39. SearchMatchAll :
false,
-
40. InitViewMode :
'SinglePage',
-
41.
-
42. ViewModeToolsVisible :
true,
-
43. ZoomToolsVisible :
true,
-
44. NavToolsVisible :
true,
-
45. CursorToolsVisible :
true,
-
46. SearchToolsVisible :
true,
-
47.
-
48. localeChain:
'en_US'
-
49. }});
-
50.
</script>
-
51.
</div>
-
52.
</body>
-
53.
</html>
2.5 创建转换类DocConverter.java
2.6 部署发布
启动tomcat，部署当前web应用
地址栏输入http://localhost:8080/ctcesims/documentUpload.jsp 如下图：
单击选择文件，选择您要上传的文档，然后单击上传，处理完成后，打印如下信息，如下图所示：
单击预览按钮，就会生成预览界面，如下图：
4.常见问题
若出现swf无法预览，请访问:http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager04a.html#119065
将生成swf的文件夹设置为信任文件位置。
以下给出 flexpaper 2.1.9 的不同之处：初始化方式改变，若文件目录与项目目录不在一起，可将附件目录在服务器中设置为虚拟目录
-
1.
<%@ page language="java" contentType="text/html; charset=UTF-8"
-
2.
pageEncoding=
"UTF-8"%>
-
3.
<%
-
4. //
String
swfFilePath=
session.getAttribute("
swfpath")
.toString();
-
5.%>
-
6.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
-
7.
<html>
-
8.
<head>
-
9.
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-
10.
<script type="text/javascript" src="js/jquery.min.js">
</script>
-
11.
<script type="text/javascript" src="js/flexpaper.js">
</script>
-
12.
<script type="text/javascript" src="js/flexpaper_handlers.js">
</script>
-
13.
<style type="text/css" media="screen">
-
14.
html,
body {
height:
100%; }
-
15.
body {
margin:
0;
padding:
0;
overflow:auto; }
-
16.
#flashContent {
display:none; }
-
17.
</style>
-
18.
-
19.
<title>文档在线预览系统
</title>
-
20.
</head>
-
21.
<body>
-
22.
<div style="position:absolute;left:50px;top:10px;">
-
23.
<div id="documentViewer" class="flexpaper_viewer" style="width:770px;height:500px">
</div>
-
24.
-
25.
<script type="text/javascript">
-
26.
-
27.
var startDocument =
"Paper";
-
28.
-
29. $(
'#documentViewer').FlexPaperViewer(
-
30. {
config : {
-
31.
-
32. SWFFile :
'upload/ddd3.swf',
-
33.
-
34. Scale :
0.6,
-
35. ZoomTransition :
'easeOut',
-
36. ZoomTime :
0.5,
-
37. ZoomInterval :
0.2,
-
38. FitPageOnLoad :
true,
-
39. FitWidthOnLoad :
false,
-
40. FullScreenAsMaxWindow :
false,
-
41. ProgressiveLoading :
false,
-
42. MinZoomSize :
0.2,
-
43. MaxZoomSize :
5,
-
44. SearchMatchAll :
false,
-
45. InitViewMode :
'Portrait',
-
46. RenderingOrder :
'flash',
-
47. StartAtPage :
'',
-
48.
-
49. ViewModeToolsVisible :
true,
-
50. ZoomToolsVisible :
true,
-
51. NavToolsVisible :
true,
-
52. CursorToolsVisible :
true,
-
53. SearchToolsVisible :
true,
-
54. WMode :
'window',
-
55. localeChain:
'en_US'
-
56. }}
-
57. );
-
58.
-
59.
</script>
-
60.
</div>
-
61.
</body>
-
62.
</html>
-
<span style="font-family:Arial;font-size:12px;">
<%@ page language="java" contentType="text/html; charset=UTF-8"
-
pageEncoding=
"UTF-8"%>
-
<%
-
//String swfFilePath=session.getAttribute("swfpath").toString();
-
%>
-
<!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/jquery.min.js">
</script>
-
<script type="text/javascript" src="js/flexpaper.js">
</script>
-
<script type="text/javascript" src="js/flexpaper_handlers.js">
</script>
-
<style type="text/css" media="screen">
-
html,
body {
height:
100%; }
-
body {
margin:
0;
padding:
0;
overflow:auto; }
-
#flashContent {
display:none; }
-
</style>
-
-
<title>文档在线预览系统
</title>
-
</head>
-
<body>
-
<div style="position:absolute;left:50px;top:10px;">
-
<div id="documentViewer" class="flexpaper_viewer" style="width:770px;height:500px">
</div>
-
-
<script type="text/javascript">
-
-
var startDocument =
"Paper";
-
-
$(
'#documentViewer').FlexPaperViewer(
-
{
config : {
-
-
SWFFile :
'upload/ddd3.swf',
-
-
Scale :
0.6,
-
ZoomTransition :
'easeOut',
-
ZoomTime :
0.5,
-
ZoomInterval :
0.2,
-
FitPageOnLoad :
true,
-
FitWidthOnLoad :
false,
-
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>
</span>
最后，若需要去除打印功能及logo，可重新编译 flexpaper 的 flash文件，网上也有下载。
3、FlexPaper参数
Flexpaper可能用到如下参数
| SwfFile (String) | 需要使用Flexpaper打开的文档 | |
| Scale (Number) | 初始化缩放比例，参数值应该是大于零的整数 | |
| ZoomTransition (String) | Flexpaper中缩放样式，它使用和Tweener一样的样式，默认参数值为easeOut.其他可选值包括: easenone, easeout, linear, easeoutquad | |
| ZoomTime (Number) | 从一个缩放比例变为另外一个缩放比例需要花费的时间，该参数值应该为0或更大。 | |
| ZoomInterval (Number) | 缩放比例之间间隔，默认值为0.1，该值为正数。 | |
| FitPageOnLoad (Boolean) | 初始化得时候自适应页面，与使用工具栏上的适应页面按钮同样的效果。 | |
| FitWidthOnLoad (Boolean) | 初始化的时候自适应页面宽度，与工具栏上的适应宽度按钮同样的效果。 | |
| localeChain (String) | 设置地区（语言），目前支持以下语言。
en_US (English) fr_FR (French) zh_CN (Chinese, Simple) es_ES (Spanish) pt_BR (Brazilian Portugese) ru_RU (Russian) fi_FN (Finnish) de_DE (German) nl_NL (Netherlands) tr_TR (Turkish) se_SE (Swedish) pt_PT (Portugese) el_EL (Greek) da_DN (Danish) cz_CS (Czech) it_IT (Italian) pl_PL (Polish) pv_FN (Finnish) hu_HU (Hungarian) | |
| FullScreenAsMaxWindow (Boolean) | 当设置为true的时候，单击全屏按钮会打开一个flexpaper最大化的新窗口而不是全屏，当由于flash播放器因为安全而禁止全屏，而使用flexpaper作为独立的flash播放器的时候设置为true是个优先选择。 | |
| ProgressiveLoading (Boolean) | 当设置为true的时候，展示文档时不会加载完整个文档，而是逐步加载，但是需要将文档转化为9以上的flash版本（使用pdf2swf的时候使用-T 9 标签）。 | |
| MaxZoomSize (Number) | 设置最大的缩放比例。 | |
| MinZoomSize (Number) | 最小的缩放比例。 | |
| SearchMatchAll (Boolean) | 设置为true的时候，单击搜索所有符合条件的地方高亮显示。 | |
| InitViewMode (String) | 设置启动模式如”Portrait” or “TwoPage”. | |
| ViewModeToolsVisible (Boolean) | 工具栏上是否显示样式选择框。 | |
| ZoomToolsVisible (Boolean) | 工具栏上是否显示缩放工具。 | |
| NavToolsVisible (Boolean) | 工具栏上是否显示导航工具。 | |
| CursorToolsVisible (Boolean) | 工具栏上是否显示光标工具。 | |
| SearchToolsVisible (Boolean) | 工具栏上是否显示搜索。 |
7万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
