SpringBoot 實現任意文件在線預覽功能

一文件在線預覽

在現代工作與生活環境中，文件共享與查看已經成爲日常不可或缺的一部分。不過傳統的文件處理方式要求用戶下載文件到本地後才能查看，這不僅佔用了設備的存儲空間，還可能導致文件傳播效率低下，甚至存在安全隱患。

因此，現在很多應用都支持文件在線預覽，像我們常見的 docx、pptx、xlsx、md、圖片、pdf 等等都可以在瀏覽器中直接查看文件內容，無需下載，大大提高了文件處理的便捷性和安全性。

二 kkFileView

kkFileView 是一個基於 Spring Boot 框架構建的開源文件文檔在線預覽解決方案。它不僅支持廣泛的文件類型，而且使用非常簡單。

kkFileView 主要有如下一些特點：

廣泛支持的文件類型：kkFileView 支持包括但不限於 doc、docx、xls、xlsx、ppt、pptx、pdf、txt 等主流辦公文檔，以及 jpg、jpeg、png、gif 等圖像文件，mp3、wav、mp4、flv 等音視頻格式，zip、rar、jar 等壓縮包文件，還有多種類文本及代碼文件，如 html、xml、json、yaml、java、py、cpp 等。
易部署性：kkFileView 提供了 ZIP、TAR.GZ 發行包和 Docker 鏡像，支持一鍵啓動腳本和豐富的配置項，無論是物理機、虛擬機還是 Docker 容器環境，都能輕鬆部署。
跨平臺服務：kkFileView 支持 Windows、Linux 和 MacOS 等多種操作系統，實現了跨平臺的無縫使用。
高性能：基於高效的文件讀取與流傳輸策略，kkFileView 在處理大文件時也能保持流暢，提升用戶體驗。
安全性：通過設置訪問權限和時效性 token，kkFileView 可以有效保護文件安全，防止未授權訪問和惡意操作。
API 接口：提供 RESTful API，支持 Java、PHP、Python、Go 等多種開發語言，方便與其他系統集成。
開源免費：kkFileView 遵循 Apache 2.0 許可證，用戶可以根據需要自由修改和分發。
擴展性強：支持多種文件類型，且易於添加新的文件類型支持或自定義顯示模板。

三使用 kkFileView

kkFileView 是獨立部署運行的，所以使用起來非常方便。

3.1 安裝部署

kkFileView 需要先安裝才能使用。這也是官方推薦的使用方式。

安裝有兩種方式。

下載源碼啓動

從 https://gitee.com/kekingcn/file-online-preview/releases 下載最新版發行包
解壓 kkFileView-x.x.x 文件（Windows 用 .zip 包，Linux/MacOS 用 .tar.gz 包）
打開解壓後文件夾的 bin 目錄，運行 startup 腳本（Windows 下以管理員身份運行 startup.bat，Linux 以 root 用戶運行 startup.sh）
瀏覽器訪問本機 8012 端口 http://127.0.0.1:8012 即可看到項目演示用首頁

Docker 啓動

啓動腳本：

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

如果網絡不暢，可以通過如下方式啓動：

wget https://kkfileview.keking.cn/kkFileView-4.1.0-docker.tar
docker load -i kkFileView-4.1.0-docker.tar
docker run -it -p 8012:8012 keking/kkfileview:4.1.0

啓動之後，頁面如下：

3.2 文件預覽

當我們的項目內需要預覽文件時，只需要調用瀏覽器打開 kkFileView 的預覽接口，並傳入須要預覽文件的 url，類似下面這樣：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/js-base64@3.6.0/base64.min.js"></script>
</head>
<body>
<script>
    var url1 = 'http://192.168.43.178:8080/1.csv';
    var url2 = 'http://192.168.43.178:8080/2.png';
    var url3 = 'http://192.168.43.178:8080/3.doc';
    var url4 = 'http://192.168.43.178:8080/4.pdf';
    var url5 = 'http://192.168.43.178:8080/5.pptx';
    var url6 = 'http://192.168.43.178:8080/6.md';
</script>
<button onclick="window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(url1)));">csv</button>
<br>
<button onclick="window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(url2)));">png</button>
<br>
<button onclick="window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(url3)));">doc</button>
<br>
<button onclick="window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(url4)));">pdf</button>
<br>
<button onclick="window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(url5)));">pptx</button>
<br>
<button onclick="window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(url6)));">md</button>
<br>
</body>
</html>

url1~url6 是我這裏幾個不同格式文件的訪問地址，調用 kkFileView 的預覽接口 http://127.0.0.1:8012/onlinePreview，並將我們的文件 url 作爲參數傳遞進去，就可以預覽文件內容了。

是不是很簡單！

這是官方給的使用方式。如果想把這個項目合併到自己現有項目中，也是可以的，只是稍微麻煩一些，需要分析接口並且手動合併代碼了，不過對於有經驗的小夥伴來說，應該也不是啥難事。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/AbLliuQmTTGCmOSorrW9FA

一 文件在線預覽