一文教你優雅落地在線預覽服務

在日常開發中，在線預覽是一個很常見的功能。在最開始調研時，博主選擇自己實現，但是有以下問題。

需要預覽的類型太多，很多類型需要不同的預覽方式。開發成本較大。

格式調整不理想。

而且博主公司需求比較緊急，所以樓主在開源項目找到kkfile.

1.為什么選擇kkfile

支持格式多樣，支持doc、docx、ppt、pptx、xls、xlsx、zip、rar、mp4、mp3以及眾多類文本如txt、html、xml、java、properties、sql、js、md、json、conf、ini、vue、php、py、bat、gitignore。

使用spring boot開發，很容易修改源碼。

提供Docker鏡像發行包，方便在容器環境部署。

支持普通http/https文件下載url、http/https文件下載流url、ftp下載url等多種預覽源

2.部署

這里可以直接下載window/linux包。

地址：https://gitee.com/kekingcn/file-online-preview/releases

1.環境要求

Java: 1.8+

OpenOffice或LiberOffice(Windows下已內置，CentOS或Ubuntu下會自動下載安裝，MacOS下需要自行安裝)

需要的依賴真心少，如果是linux下openoffice也不需要下載。這里注意centos8暫時不能安裝openoffice。

2.更改配置

配置文件在以下路徑，可以根據個人需要按照注釋修改，如果沒有特殊需求，直接啟動就可以。

3.啟動

進入以下文件夾，找到啟動文件即可實現啟動。

window：雙擊startup.bat或者cmd - 輸入startup.bat

linux:./startup.sh （這里我是用的CentOS Linux release 7.7.1908 (Core) 啟動會自動下載 項目需要的插件 如：openoffice）

拉取鏡像

docker pull keking/kkfileview

運行

docker run -it -p 8012:8012 keking/kkfileview

訪問 ip：8012即可驗證是否成功。如以下操作就可以查看到上傳的文件了。

在使用過程中，不需要整合到原有代碼中（如果有精力和能力可以嘗試）。以獨立服務方式提供功能接口。

4.如何調用

在前段代碼中如下文調用即可

var url = 'http://127.0.0.1:8080/file/test.txt'; //要預覽文件的訪問地址 window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(previewUrl)));

獲取文件的流。var url = ‘http://127.0.0.1:8080/file/test.txt’; 為一個下載文件的接口（需要自己實現），調用后會返回文件流。

將上文得到的文件流傳到http://127.0.0.1:8012/onlinePreview接口中。

@GetMapping("/Download") public String onlineDownload(FileMessageVO fileMessageVO) throws UnsupportedEncodingException { String commonfile = "/home/common_files/"; // 獲取HttpServletResponse HttpServletResponse response = ((ServletRequestAttributes)RequestContextHolder.getRequestAttributes()).getResponse(); String fileName = fileMessageVO.getFullfilename();// 文件名 if (fileName != null) { // 設置文件路徑 File file = new File(commonfile + fileName); if (file.exists()) { // 設置HTTP響應頭 response.reset(); try { OutputStream os = response.getOutputStream(); // 讀取文件 InputStream in = new FileInputStream(file); // copy文件 IOUtils.copy(in, os); in.close(); os.close(); return "下載成功"; } catch (Exception e) { e.printStackTrace(); } } } return "下載失敗"; }

public class FileMessageVO { /** * 文件路徑 */ private String fileRoute; /** * - */ private String fileDownloadUri; /** * 文件類型 */ private String fileType; /** * 文件大小 */ private String size; /** * 在線預覽字段 */ private String fullfilename; }

這里注意：下載接口中，文件名一定要使用fullfilename。不要問為什么不適用駝峰寫法！

那么在以上條件下該如何調用呢，請參考下文示例。以下是前臺代碼。

//以下是你業務服務提供的下載接口，意思是通過文件名稱下載 let url = `http://39.103.xxx.xxx:8080/flowable/Download?fullfilename=${fileName}`; //以下配置好在線預覽服務器即可 window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(url)));

5.關于異常

可以參考官方文檔：https://kkfileview.keking.cn/zh-cn/docs/faq.html

3.修改源碼并打包

因為樓主公司業務需求的原因，傳入的文件是md5加密后的名稱，不帶路徑名稱，所以需要更改源碼，更改接口，以下介紹樓主是如何修改的。

1.確定controller

根據查找確定預覽接口 如下 ：

根據圖分析，每一種文件都有自己一套解析的流程（策略+工廠模式），我們需要修改這些流程，樓主這里新增了一套接口，為加密使用。（為什么不在原來的接口上修改，因為樓主想保持原接口好用）

2.工廠類

這個就是工廠類。根據文件類型確定調用的類（沒有修改）

3.FilePreview接口

可以看到核心接口FilePreview，每種文件的解析方法都集成于FilePreview，所以接口我們按照自己的需求重寫了一套。

4.FilePreview接口的實現

接下來我就就可以在FilePreview接口的實現類中取重寫我們的流程了（以上新增的接口都是在原有文件上修改）以下舉一個例子，樓主的邏輯是把原文件的后綴名發進來，然后重新拼寫下載。

5.開啟攔截

新增接口時，需要新增以下配置，否則訪問不到。

6.打包

打包就會生成我們的jar包了 然后就可以愉快的調用了

7.調用

在使用時不要忘記將接口名稱改成我們修改過的。

window.open('http://127.0.0.1:8012/onlinePreviewMd5?url='+encodeURIComponent(Base64.encode(previewUrl)));

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。