仿百度文庫解決方案(六)——利用FlexPaper顯示Flash(SWF)


目錄

仿百度文庫解決方案(一)——總體思路

仿百度文庫解決方案(二)——利用Jacob調用MS Office轉換文檔為PDF

仿百度文庫解決方案(三)——利用JCom調用MS Office或者Acrobat API轉換文檔為PDF

仿百度文庫解決方案(四)——利用JODConverter調用OpenOffice.org服務轉換文檔為PDF

仿百度文庫解決方案(五)——利用SWFTools轉換PDF文檔為SWF

仿百度文庫解決方案(六)——利用FlexPaper顯示Flash(SWF)

 

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):工具欄上是否顯示搜索工具

 2.3 FlexPaper例子

  創建html頁面test.html,代碼如下:

<html>
<head>
  <title>Flexpaper例子</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script type="text/javascript" src="js/flexpaper_flash.js"></script>
</head>
<body>
  <div style="position:absolute;left:10px;top:10px;">
  <a id="viewerPlaceHolder" style="width:680px;height:480px;display:block"></a>
  <script type="text/javascript">
    var fp = new FlexPaperViewer(
    'FlexPaperViewer',    /* 對應FlexPaperViewer.swf文件*/
    'viewerPlaceHolder', { config : {
      SwfFile : 'Paper.swf',
      Scale : 0.6,
      ZoomTransition : 'easeOut',
      ZoomTime : 0.5,
      ZoomInterval : 0.2,
      FitPageOnLoad : true,
      FitWidthOnLoad : true,
      FullScreenAsMaxWindow : false,
      ProgressiveLoading : false,
      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>

  test.html文件以及需要的js,swf文件組織結構如圖6-2所示:

  test.html文件組織結構

圖6-2 test.html文件組織結構

  顯示Paper.swf文件的效果如圖6-3所示:

FlexPaper下顯示Paper.swf效果

圖6-3 FlexPaper下顯示Paper.swf效果

 

   轉載說明本文系作者原創,轉載時請注明文章出處:肖恩也有夢想 博客園,請尊重作者的勞動成果,謝謝!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM