仿百度文库解决方案（五）-flexpaper实现文档的在线预览
|
??????????? 在把文档的格式转换成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 ????? 下载之后直接加压就可以了，下面是解压之后的文件截图： ?????? ???? ????? 主要文件，文件夹说明：
??? ??? 2 Flexpaper的参数含义
????????????
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
???????????
3 flexpaper的使用例子
????????
<%@ 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>
?????????? 在这里的测试的时候把页面建在了于flexpaper的根目录下，这样只是为了方便测试，不是一定要放在同一个目录下。下面是文件放在的位置和效果预览图。
????????
?????????? 效果图：
??????????
?
?
????????????
页面显示的效果是因为在pdf转换时出现的乱码，在这里不处理，下一篇博客会针对乱码的处理。
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
