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

語言: CN / TW / HK

theme: v-green

小知識,大挑戰!本文正在參與“程式設計師必備小知識”創作活動。

在日常開發中,線上預覽是一個很常見的功能。在最開始調研時,博主選擇自己實現,但是有以下問題。 1. 需要預覽的型別太多,很多型別需要不同的預覽方式。開發成本較大。 2. 格式調整不理想。

而且博主公司需求比較緊急,所以樓主在開源專案找到kkfile.

1.為什麼選擇kkfile

  1. 支援格式多樣,支援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。
  2. 使用spring boot開發,很容易修改原始碼。
  3. 提供Docker映象發行包,方便在容器環境部署。
  4. 支援普通http/https檔案下載url、http/https檔案下載流url、ftp下載url等多種預覽源
  5. 開源!!!!免費。在這裡感謝作者。

2.部署

這裡可以直接下載window/linux包。 地址:https://gitee.com/kekingcn/file-online-preview/releases

1.環境要求

  1. Java: 1.8+
  2. OpenOffice或LiberOffice(Windows下已內建,CentOS或Ubuntu下會自動下載安裝,MacOS下需要自行安裝)

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

2.更改配置

配置檔案在以下路徑,可以根據個人需要按照註釋修改,如果沒有特殊需求,直接啟動就可以。 在這裡插入圖片描述

3.啟動

1.傳統方式啟動

進入以下資料夾,找到啟動檔案即可實現啟動。

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

linux:./startup.sh (這裡我是用的CentOS Linux release 7.7.1908 (Core) 啟動會自動下載 專案需要的外掛 如:openoffice)

2.docker啟動

拉取映象 bash docker pull keking/kkfileview 執行

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

3.驗證

訪問 ip:8012即可驗證是否成功。如以下操作就可以檢視到上傳的檔案了。 在這裡插入圖片描述

在使用過程中,不需要整合到原有程式碼中(如果有精力和能力可以嘗試)。以獨立服務方式提供功能介面。

4.如何呼叫

在前段程式碼中如下文呼叫即可 ```bash

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))); ```

1.呼叫原理

  1. 獲取檔案的流。var url = 'http://127.0.0.1:8080/file/test.txt'; 為一個下載檔案的介面(需要自己實現),呼叫後會返回檔案流。
  2. 將上文得到的檔案流傳到http://127.0.0.1:8012/onlinePreview介面中。

2.下載介面

bash @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 "下載失敗"; }

```bash public class FileMessageVO {

/**
 * 檔案路徑
 */
private String fileRoute;

/**
 * 下載地址
 */
private String fileDownloadUri;

/**
 * 檔案型別
 */
private String fileType;

/**
 * 檔案大小
 */
private String size;

/**
 * 線上預覽欄位
 */
private String fullfilename;
}

```

這裡注意:下載介面中,檔名一定要使用fullfilename。不要問為什麼不適用駝峰寫法!

3.示例

那麼在以上條件下該如何呼叫呢,請參考下文示例。以下是前臺程式碼。

bash //以下是你業務服務提供的下載介面,意思是通過檔名稱下載 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.呼叫

在使用時不要忘記將介面名稱改成我們修改過的。 ```js window.open('http://127.0.0.1:8012/onlinePreviewMd5?url='+encodeURIComponent(Base64.encode(previewUrl)));