一文教你優雅落地線上預覽服務_小鮑侃java

theme: v-green

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

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

而且博主公司需求比較緊急，所以樓主在開源專案找到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包。地址：http://gitee.com/kekingcn/file-online-preview/releases

1.環境要求

Java: 1.8+
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.呼叫原理

獲取檔案的流。var url = 'http://127.0.0.1:8080/file/test.txt'; 為一個下載檔案的介面（需要自己實現），呼叫後會返回檔案流。
將上文得到的檔案流傳到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)));