一個項目中要做一個在線預覽附件(和百度文庫差不多)的小功能點,樓主在開發過程中踩了很多坑的同時也總結了一些方法,僅供廣大猿友參考,那么要實現這個小功能,目前主要是有如下3種可行的實現方式,下面先說實現的思路設計與他們的優缺點:
第一種思路:先把附件office文檔(doc,docx,ppt,pptx,xls,xlsx,txt)轉為PDF格式,這里需要用一個OpenOffic這玩意來轉換,有服務和端口的屬性,所以它是一個服務類軟件(像tomcat這類,區別是所提供的服務各不相同),然后把PDF轉為SWF文件類型,最后在前台頁面使用Flexpaper插件進行播放即可實現。
第一種方式的好處在於:可以兼容IE低版本的瀏覽器。
第一種方式的!好在於:
- 首先是把一個附件進行了2次的轉換,這里的轉換是指另外保存了.pdf和.swf這兩種格式的文件,這無疑的加大了存儲空間的使用。
- 其次是.swf格式的文件需要放到項目的WebRoot文件夾的下層才能被Flexpaper插件所讀取,當然了你也可以使用Nginx做一個地址映射,把.swf文件放到別的地方也能被Flexpaper所讀取。
- 最后這種方式最大的缺點是Flexpaper插件主要是依賴於一個文件FlexPaperViewer.swf,而這個文件是無法編輯的,如果要編輯,則要找到Flexpaper的源碼,然后修改源碼,在重新構建生成FlexPaperViewer.swf,來着這里,大家肯定會問,為什么要編輯這個文件,那是因為這個文件是控制Flexpaper插件的各種按鈕的,比如打印按鈕的顯示和隱藏,更重要的是Flexpaper插件是有它自帶的LOGO水印,不去掉會顯得很難看且尷尬,而編輯這個文件可以解決這些問題,另外如果你的功能中要對附件加自定義的水印的話,就不要采取這種方式了,因為是不可能實現的,原因很簡單,因為PDF轉SWF中這一步是很坑的,即使你的PDF中已經添加了水印,但是轉換后得到的SWF是無水印的,不知道為什么會幫你自動去掉,所以前台讀取的是.swf就自然就顯示不出來水印了。
- 谷歌瀏覽器需要安裝flash插件才能正常顯示。
第二種思路:第一步還是和第一種一樣的,都是先把附件為office文檔轉換為PDF格式,但是不同於第一種的是得到PDF之后呢,是使用pdf2htmlex插件把PDF直接轉化為HTML文本輸出到頁面來。
第一種方式的好處在於:就是不用生成.swf文件,節省空間,提升效率。
第一種方式的!好在於:
- 首先只能達到附件預覽的效果,如果你要實現打印,文本搜索等功能是是要自己另外寫代碼的。
- 其次,如果你的PDF中加了水印的話,輸出的HTML也是沒有水印的。
第三種思路:最靠譜的一種方式,第一步和前兩種方法是一樣的,都是先把附件Office文檔轉換了PDF格式,然后不同的是,得到PDF之后,使用PDF.JS這個框架來顯示附件,但是這個框架是基於HTML5的新特性才能實現的,IE的話需要9以上版本才能兼容,這是最大的缺點了,優點太多了,即可看到水印,而且打印等這些功能點都已經實現好了,並且可以改變一些參數就可以實現這些按鈕的權限的控制,良心之作。
-------------------------------------------------------------代碼分割線-------------------------------------------------------------
寫完思路之后當然要寫具體要怎么寫代碼,先說第一種:
這是JAVA后台代碼結構
- 一個是測試類,是用來測試offiec文檔轉換換為PDF和SWF的
- 一個工具類,是用來實現轉換的代碼
- 一個配置文件是是配置你的OpenOffic服務的端口和地址
這是Web前台代碼結構
主要是一些CSS和JS的控件和樣式,前台的頁面主要是這個FlexPaperViewer.html 或者index.html把頁面嵌進一個DIV層就能自定義展示,要顯示的文檔要轉換為SWF格式放到WEBROOT下層任意路徑,比如我的docs文件夾里的Paper.pdf.swf文件
訪問http://localhost:8080/20180107_SHOW_OFFICE/views/index.html 或者FlexPaperViewer.html
效果如下
項目Demo代碼百度雲地址:這個項目的打印功能和水印是被我去掉的,具體的怎么去掉自己去百度吧很多教程很麻煩這里就不演示
鏈接:https://pan.baidu.com/s/1o7LORxw 密碼:8653
保留了打印功能的是這個地址:里面有個FlexPaperViewer.swf的配置文件把它替換了原來的就行了
鏈接:https://pan.baidu.com/s/1pKK0VMF 密碼:di0n
然后說第二種:
通過調用工具類里邊的一個方法,把一個PDF文件內容變為靜態的HTML,然后瀏覽器直接顯示HTML就可以實現預覽效果了。
效果如下
Demo鏈接:https://pan.baidu.com/s/1eRQiVIy 密碼:bdjw
最后說第三種:
首先呢要在TOMCAT服務器搭建一個PDF.JS框架,說白了就是在webapp文件夾放入一個已經搭建好的小項目,如圖
然后如何調用呢?在你的項目中DIV的SRC或者彈框中用
src=http://localhost:8080/generic/web/viewer.html?file=http://localhost:8080/resources/PDF文件名 其中resources是個文件夾這個是自己建的就可以了,?后邊PDF文件的路徑
效果如下
百度雲:鏈接:https://pan.baidu.com/s/1eR7SdzW 密碼:j9m1 這個是PDF.JS框架代碼
最后附上PDF加水印的代碼,也用到一些第三方jar包,直接調用,比較簡單。
鏈接:https://pan.baidu.com/s/1eR7Sd02 密碼:ca1l
最后補充說明一下:
關於把offer文檔轉換為PDF的時候首先在本機安裝OpenOffice,然后就開啟服務,在安裝目錄下的program文件夾(里邊是存命令的),進入后 通過cmd控制台輸入以下命令:
soffice -headless -accept="socket,host=127.0.0.1,port=8100;urp;" -nofirststartwizard