Flexpaper jsp方式使用


1. FlexPaper簡介

FlexPaper是一個開源輕量級的文檔瀏覽組件,被設計和比如PDF2SWF庫(包含於SWFTools)一起工作,使得在網頁上,Adobe Flex以及別的基於Flash的應用程序中顯示和交互PDF文件成爲可能。即,使得在沒有安裝PDF閱讀器軟件的情況下瀏覽PDF文件成爲可能。FlexPaper項目同時提供了Flex庫和獨立的Flash版本。

2. 使用FlexPaper

2.1 下載FlexPaper

FlexPaper在google code上的項目地址爲http://code.google.com/p/flexpaper/。目前,FlexPaper最新的flash版本爲FlexPaper_1.5.1_flash.zip

下載、解壓後,可以看到如圖6-1顯示的目錄:

FlexPaper壓縮包目錄

圖6-1 FlexPaper壓縮包目錄

主要文件,文件夾說明:

examples文件夾:存放FlexPaper使用的例子

js文件夾:存放FlexPaper調用的js文件

php文件夾:存放php使用FlexPaper的例子

index.html:例子主頁

FlexPaperViewer.swf:FlexPaper的核心文件

playerProductInstall.swf:如果客戶端瀏覽器的flashplayer版本過低,將嵌入此swf文件

2.2 FlexPaper參數說明

SwfFile(String):需要使用FlexPaper打開的文檔

Scale(Number):初始化縮放比例,參數值應該是大於零的整數(1=100%)

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 (Finish);hu_HU (Hungarian)。

FullScreenAsMaxWindow(Boolean):當設置爲true時,單擊全拼按鈕會打開一個FlexPaper最大化的新窗口而不是全屏,當由於flash播放器因爲安全而禁止全屏,而使用flexpaper作爲獨立的flash播放器的時候設置爲true是個優先選擇

ProgressiveLoading(Boolean):當設置爲true時,展示文檔時不會加載完整個文檔,而是逐步加載,但是需要將文檔中轉化爲9以上的版本(使用pdf2swf的時候使用-T 9標籤)

MaxZoomSize(Number):設置最大的縮放比例

MinZoomSize(Number):設置最小的縮放比例

SearchMatchAll(Boolean):設置爲true時,單擊搜索所有符合條件的地方高亮顯示

InitViewMode(String):設置啓動模式如“Portrait”或“TowPage”

ViewModeToolsVisible(Boolean):工具欄上是否顯示樣式選擇框

ZoomToolsVisible(Boolean):工具欄上時候顯示縮放工具

NavToolsVisible(Boolean):工具欄上是否顯示導航工具

CursorToolsVisible(Boolean):工具欄上是否顯示光標工具

SearchToolsVisible(Boolean):工具欄上是否顯示搜索工具

示例:新建web項目


在index.jsp頁面中:

<%@ 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>
    <base href="<%=basePath%>">
    <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">
	<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>
  </head>
  <body>
	<div id="documentViewer" class="flexpaper_viewer" style="position:absolute;left:10px;top:10px;width:770px;height:500px"></div>
  <script type="text/javascript">
		$('#documentViewer').FlexPaperViewer({
			 config : {
				 SwfFile : 'Oracle.swf',//要轉換的成pdf的swf文件
				 Scale : 0.6, 
				 ZoomTransition : 'easeOut',
				 ZoomTime : 0.5, 
				 ZoomInterval : 0.1,
				 FitPageOnLoad : true,
				 FitWidthOnLoad : false, 
				 FullScreenAsMaxWindow : false,
				 ProgressiveLoading : false,
				 MinZoomSize : 0.2,
				 MaxZoomSize : 5,
				 SearchMatchAll : false,
				 InitViewMode : 'Portrait',
				 RenderingOrder : 'flash,flash',
		
				 ViewModeToolsVisible : true,
				 ZoomToolsVisible : true,
				 NavToolsVisible : true,
				 CursorToolsVisible : true,
				 SearchToolsVisible : true,
		
				 jsDirectory : 'js/',
		
				 JSONDataType : 'jsonp',
				 key : '',
		
				 WMode : 'window',
				 localeChain: 'en_US'
			}
		});
	</script>
  </body>
</html>


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章