在把文档的格式转换成swf格式以后,现在该实现在线的预览。 在线预览的方法有两种方式。 第一种: 通过flashpaper实现文档的在线预览。第二种是通过flexpaper实现文档的在线预览。 在博客中用到的是第二种方法。 在这里我们来了解一下是什么是flexpaper。
1 Flexpaper的简介
FlexPaper是一个被设计用来与PDF2SWF一起使用,开源轻量级的在浏览器上显示各种文档的组件, 使在Flex中显示PDF成为可能,而这个过程并无需PDF软件环境的支持。它可以被当做Flex的库来使用。也可以通过将一些例如Word、PPT等文档转成PDF,然后实现在线浏览。
本文用到的flexpaper的版本是:FlexPaper_1.4.5_flash,
下载的地址:http://download.csdn.net/download/yali1990515/4443796
下载之后直接加压就可以了,下面是解压之后的文件截图:
主要文件,文件夹说明:
-
examples文件夹:存放FlexPaper使用的例子
-
js文件夹:存放FlexPaper调用的js文件
-
php文件夹:存放php使用FlexPaper的例子
-
index.html:例子主页
-
FlexPaperViewer.swf:FlexPaper的核心文件
-
playerProductInstall.swf:如果客户端浏览器的flashplayer版本过低,将嵌入此swf文件
2 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)工具栏上是否显示搜索
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>文档显示页面</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<style type="text/css" media="screen">
html,body {
height: 100%;
}
body {
margin: 0;
padding: 0;
overflow: auto;
}
#flashContent {
display: none;
}
</style>
<script type="text/javascript" src="js/flexpaper_flash.js">
</script>
</head>
<body>
<div>
<br/><Br/><br/>
</div>
<div style="position:absolute;left:200px;top:10px;">
<a id="viewerPlaceHolder" style="width:650px;height:700px;display:block"></a>
<script type="text/javascript">
var fp = new FlexPaperViewer(
'FlexPaperViewer',
'viewerPlaceHolder', { config : {
SwfFile : escape('http://localhost:8080/Test/swf/1.swf'),
Scale : 0.8,
ZoomTransition : 'easeOut',
ZoomTime : 0.5,
ZoomInterval : 0.2,
FitPageOnLoad : true,
FitWidthOnLoad : false,
PrintEnabled : false,
FullScreenAsMaxWindow : false,
ProgressiveLoading : true,
MinZoomSize : 0.2,
MaxZoomSize : 5,
SearchMatchAll : false,
InitViewMode : 'Portrait',
ViewModeToolsVisible : true,
ZoomToolsVisible : true,
NavToolsVisible : true,
CursorToolsVisible : true,
SearchToolsVisible : true,
localeChain: 'zh_CN'
}});
</script>
</div>
</body>
</html>