分析了下網易郵箱的文件預覽功能,他用的是微軟的組件,最早叫Office online,現在分開了叫Word online、Excel online ....等等,效果十分炫酷功能十分強大,但是查看了下對api的說明發現對服務器的要求比較苛刻而且配置比較復雜不太適合。然后 又看了下騰訊用的是永中第三方組件,效果嘛自然比不上微軟的但是能用,綜合網上的一些資料大概也就那么幾種方式實現
? ? ?1.使用Microsoft的Office組件將文件直接轉換為html文件(優點:代碼實現最簡單,工作強度最小。缺點:效果極差)
? ? ?2.使用Microsoft的Office組件將文件轉換為PDF格式文件,然后再使用pdf2swf轉換為swf文件,也就是flash文件在使用FlexPaper展示出來(優點:預覽效果能接受,缺點:代碼量大)
? ? ? ? 效果如圖:
? ? ?3. 使用Office online(優點:表現完美,缺點:不適合中小企業應用)
綜合考慮決定使用第二種方法,經過次次波折終于可以使用,但是有個問題至今沒有得到解決,調用Office組件的時候有時候會出現如下異常:
檢索 COM 類工廠中 CLSID 為 {000209FF-0000-0000-C000-000000000046} 的組件失敗,原因是出現以下錯誤: 8000401a 因為配置標識不正確,系統無法開始服務器進程。請檢查用戶名和密碼。 (異常來自 HRESULT:0x8000401A),查閱無數資料還是不能解決,最讓人不可接受的的是office文件必須標標準準毫無容錯能力,當轉換ppt文件時竟然會彈出轉換進度框!!
好吧!那么我們改進它。
使用ASPOSE+pdf2swf+FlexPaper
關于ASPOSE大家可以到官網了解,這是款商業收費產品但是免費也可以使用
1、引用dll
2、編寫轉換幫助類

3、將pdf文件轉swf的轉換器放到站點根目錄下新建文件夾pdf2swf(我就是這么配置的,您隨意)
4、配置FlexPaper
? ? 預覽頁面引用
<script src="/FlexPaper/js/swfobject.js" type="text/javascript"></script> <script type="text/javascript" src="/FlexPaper/js/flexpaper_flash.js"></script>
? ? 控件容器以及設置項
? ??
<div style="margin:0 auto;width:980px;"> <div id="flashContent" style="display:none;"> <p> To view this page ensure that Adobe Flash Player version 10.0.0 or greater is installed. </p> <script type="text/javascript"> var pageHost = ((document.location.protocol == "https:") ? "https://" : "http://"); document.write("<a ><img src='" + pageHost + "www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /></a>"); </script> </div> <script type="text/javascript"> var _filename = document.getElementById("_filename").value; var swfVersionStr = "9.0.0"; var xiSwfUrlStr = "playerProductInstall.swf"; var flashvars = { SwfFile: escape(_filename), Scale: 0.6, ZoomTransition: "easeOut", ZoomTime: 0.5, ZoomInterval: 0.1, FitPageOnLoad: false, FitWidthOnLoad: true, PrintEnabled: true, FullScreenAsMaxWindow: false, ProgressiveLoading: true, PrintToolsVisible: true, ViewModeToolsVisible: true, ZoomToolsVisible: true, FullScreenVisible: true, NavToolsVisible: true, CursorToolsVisible: true, SearchToolsVisible: true, SearchMatchAll:true, localeChain: "zh_CN" }; var params = { quality: "high", bgcolor: "#ffffff", allowscriptaccess: "sameDomain", allowfullscreen: "true" } var attributes = { id: "FlexPaperViewer", name: "FlexPaperViewer" }; swfobject.embedSWF("/FlexPaper/FlexPaperViewer.swf", "flashContent", "980", "620", swfVersionStr, xiSwfUrlStr, flashvars, params, attributes); swfobject.createCSS("#flashContent", "display:block;text-align:left;"); </script> </div>
?
? ? ?
document.getElementById("_filename").value是預覽文件的路徑
?
OK ?大功告成 ?,至于如何上傳,怎么保存上傳的文件等等那些邏輯我這里就省略了。。。。,但是有個建議,當用戶上傳文件之后調用轉換api生成預覽文件是個耗時的操作,
文件越大耗時越長,也就是說生成預覽文件的時候是需要時間的,因此我使用異步方式生成預覽文件。
?