為了實作文檔線上預覽功能,同僚從各種資料提煉出的幾種方案,拿出來共享,整理如下。
一:通過搜尋引擎整理
文檔預覽即文檔以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,很多文檔都是在使用者的預覽操作中進行轉換,等到下一次預覽時,就直接浏覽。