文檔在線預覽方案


為了實現文檔在線預覽功能,同事從各種資料提煉出的幾種方案,拿出來共享,整理如下。

一:通過搜索引擎整理

文檔預覽即文檔以flash的形式在網頁上展示,所以要解決兩個問題:

①:以什么格式展示flash

②:文檔如何轉化為符合格式的flash

展示flash有兩種方式,一種是直接生成好一個完整的flash展示出來,一種是用一個播放器來播放另外一個文檔轉化來的flash。第一種方式可以用SWFTools的框架直接將pdf轉化成一個整體的flash展示,但這種方式的flash較大,且不容易控制,故用得較少。第二種方式是重點,首先需要了解的是一個開源的Flexpaper播放器,它可以播放一幀一頁的flash;在flexpaper的基礎上,如果遇到大文檔則會出現速度和性能的問題,這個時候需要像百度文庫、豆丁一樣修改flexpaper,讓它支持一次僅讀取指定頁數的flash。

轉化文檔為flash的思路有一條,但有多種實現方式。一般文檔需要先轉化為pdf,再從pdf轉化為flash。轉化為pdf的方法有很多,例如使用虛擬打印機、使用MicrosoftOffice的API、使用OpenOffice,使用flashpaper轉化等,不過轉化的過程中,可能由於文檔有誤、損壞、加密等原因造成轉化失敗。從pdf轉化為flash就簡單了許多,直接使用SWFTools的pdf2swf即可實現多種方式的轉化。

注:MS OFFICE系列,直接用MS軟件轉成PDF,成功率比較高,但是只能在window環境下進行。

總結:文檔在線預覽功能的實現思路流程圖大致如下:

        

 

插敘:
目前能夠實現在線閱讀的方案主要為兩種:
1.類似於百度文庫和豆丁網的Flash形式展示(Office→Flash);
 實現方法:
將文檔轉換為Flash格式,用播放器播放。
案例:百度文庫、豆丁、Doc88的在線閱讀。
優勢:播放器可以實現放大、縮小、書簽、搜索等人性化的功能。
劣勢:1.后台處理比較繁瑣,會出現同名不同格式的文件等(要做好判斷)
      2.如果及時轉換,由於網速等問題,轉換的閱讀周期較長,用戶等待時間較長;(也可以考慮做一個后台及時轉換系統,對服務器要求較高)
         3.客戶端僅支持電腦和支持flash的終端。(並且對adobe flash player版本也有一定要求)。
2.類似於網易郵箱和移動139郵箱的Html形式展示(Office→Html);
實現方法:
將文檔轉換為Html格式,直接在瀏覽器上閱讀。
目前比較流行的方式利用JACOB(JAVA-COMBridge)進行轉換。
案例:
網易郵箱、中國移動郵箱、騰訊郵箱的附件預覽。
優勢:1.后台處理簡單,生成html文件;
      2.在速度方面,轉換速度快,用戶體驗好;
      3.客戶端只要只要有瀏覽器就可以閱讀,如電腦、平板電腦、手機以及其他終端。
劣勢:1.目前沒有專業的播放器支持,因此在前端顯示上少了些比較不錯的功能,在用戶感官效果方面也有一定的差距!
注:用163附件在線查看功能測試如下:
 

因為是officeà生成html會出現亂碼字體錯位等排版問題,但是通過點擊鼠標右鍵可以看出該文檔是圖片格式進行顯示的。

 


二:進行預覽操作

 A:office轉換pdf:
    前面已經提到了幾種選擇,我這里選擇openoffice。
  注:OpenOffice 原是Sun公司的一套商業級Office軟件套件,經過Sun公司公開程序碼之后,正式命名為OpenOffice發展計划,並由許許多多熱心於自由軟件的人士共同來維持。讓大家能在MS OFFICE之外,還能有免費的Office可以使用,openoffice是跨平台的,並且OpenOffice.org不只是一個辦公軟件產品,它也是一個開發平台,開發者可以基於它提供的應用程序接口組建自己的產品,設計並實現完整的解決方案。
①:下載openoffice,並安裝。
   注,下載前應先安裝java運行環境JDK。安裝后在cmd命令下面啟動該服務。啟動命令如下:
②:用命令進行轉換操作:把f.png轉換為f.pdf
 如下:
③:在php中用程序調用轉換命令:
  exec('C:\java\openoffice\OpenOffice.org\program\python.exeC:\java\openoffice\OpenOffice.org\program\DocumentConverter.py f.png f.pdf');

B:pdf轉換swf:
①:下載SWFTools利用其pdf2swf進行轉換操作。
  $command="D:/pdftoswf/pdf2swf.exe  -t \"d:\\testopenoffice\\testexcels.pdf\"-o  \" d:\\testopenoffice \\tesexcels.swf\"-s flashversion=9"; 

    //創建shell對象 

    $WshShell=new COM("WScript.Shell"); 

       //執行cmd命令
       $Exec= $WshShell->Run("cmd/C". $command, 0, true);
C:下載flexpaper進行瀏覽:

 ①:下載flexpaper,並解壓縮
②:把其中的js文件夾和FlexPaperViewer.swf、playerProductInstall.swf這三個文件復制到項目中。


③:新建一個php展示頁面進行瀏覽。

 代碼如下:<divid="viewerPlaceHolder"style="width:730px;height:480px;display:block"></div>

            <scripttype="text/javascript"

              varfp = newFlexPaperViewer(   

                      'FlexPaperViewer',

                      'viewerPlaceHolder', { config : {

                      SwfFile :"../UploadFiles/<%=getVal()%>",//服務器端的SwfPath屬性,設置或獲取要顯示的swf路徑

                      Scale :0.6, //比例

                      ZoomTransition : 'easeOut',//變焦過度可以設置的參數:easenone, easeout, linear, easeoutquad

                      ZoomTime: 0.5,// 縮放時間

                      ZoomInterval : 0.2,// 縮放滑竿縮放比例

                      FitPageOnLoad : true,

                      FitWidthOnLoad : false,

                      PrintEnabled : true,//能否打印

                      FullScreenAsMaxWindow : false,//設置為true后,單擊最大化將新打開一個flexpaper窗口,而不是真正的最大化

                      ProgressiveLoading : false,//加載進度

PrintToolsVisible : true,//打印工具可見性

                      MinZoomSize : 0.2,

                      MaxZoomSize : 5,

                      SearchMatchAll : false,

                      InitViewMode : 'Portrait',

                      

                      ViewModeToolsVisible : true,//視圖模式工具可見性

                      ZoomToolsVisible : true,//縮放工具可見性

                      NavToolsVisible : true,//頁面導航可見性

                      CursorToolsVisible : true,// 光標工具可見性

                      SearchToolsVisible : true,// 搜索框可見性

                       localeChain: 'en_US'//語言設置,en_US(英語)                   }});

            </script>

注:上面的id= viewerPlaceHolder的div是要顯示swf文檔的區域,可以隨便定義樣式。
注:上面基本不需要什么大的改動,比較重要的地方是上面陰影部分的地方,這個地方就是瀏覽你上面生成的swf文件。js中的都是flexpaper的屬性參數,可以自己隨意定義。比如鼠標形狀,可見度等等。相關的參數屬性以及相關的函數運用可以參考相關文檔。

相關事件屬性:

函數名稱

函數說明

gotoPage (Number pageNumber)

跳轉到指定頁

fitWidth()

設置為寬度模式視圖

fitHeight()

設置為高度模式視圖

loadSwf (String swffile)

加載一個新的swf文件到瀏覽器中

getCurrPage()

獲取當前頁碼

nextPage()

跳轉到下一頁

prevPage ()

跳轉到上一頁

Zoom (Number factor)

按系數縮放

searchText (String text)

搜索文字

switchMode (String mode) 

變換視圖模式;參數值可為("Portrait", "Two Page", "Tile")

printPaper ()

打印加載的文檔

 事件名稱

事件說明

onDocumentLoaded ()

文檔加載完成后觸發

onDocumentLoadedError (String errorMessage)

加載文檔出錯時候觸發

onProgress (Number bytesloaded, Number bytestotal)

文檔正在加載的時候觸發

onCurrentPageChanged (Number pagenumber)

頁面改變時觸發

onExternalLinkClicked (String link) 

當用戶點擊外部鏈接的時候觸發




 

瀏覽效果如圖:


加上什么js中的屬性后,具有的功能
打印、單頁、雙頁、網格圖、適合寬度、適合整頁、放大工具條和比例數字、全屏、跳轉頁面輸入框、翻頁按鈕、箭頭、手型、搜索框即按鈕
目前已經測試的格式有:
doc、docx、xls、xlsx、ppt、pptx、txt、png、jpeg、gif、pdf

相關實際細節問題還等開發中解決!
三,考慮的問題:
1、線程問題,ASP或者php代碼對線程控制的控制的不是很好,一旦出現EXCEL假死不能關閉進程,有可能會導致后面的轉換無法進行。
2、並發問題,一旦大批量同時轉換,那么勢必會造成服務器端CPU與內存資源的占用,最好的辦法是用隊列來解決,那種專業的轉換系統公司就是加入了這種方式。
3、轉換中途FlashPaper或Office組件出錯,如何結束錯誤並反回WEB調用信息。
4、用戶上傳文檔后,是后台即時進行轉換或者當其他用戶點擊預覽時再進行轉換瀏覽。通過了解測試,

  百度:
   1,把一些比較熱的關鍵文檔預先轉換好。

   2,針對一些搜索率不高的或者新上傳的文檔沒有進行及時轉換。

   剛上傳的:

  豆丁:
    1,很多文檔都是在用戶的預覽操作中進行轉換,等到下一次預覽時,就直接瀏覽。



免責聲明!

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



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