很多系統(tǒng)都有附件上傳的功能,比如上傳一些pdf,excel,圖片等等。不過想預(yù)覽這些文件就比較麻煩，需要一個個去找方案集成。今天介紹一個開源項(xiàng)目kkFileView，直接幫我們把這些功能都做好了。不需要改造原有項(xiàng)目，支持不同語言。而且支持docker部署，0學(xué)習(xí)成本，一起來看看吧。

1. 簡介

kkFileView為文件文檔在線預(yù)覽解決方案，該項(xiàng)目使用流行的spring boot搭建，易上手和部署，基本支持主流辦公文檔的在線預(yù)覽，如doc,docx,xls,xlsx,ppt,pptx,pdf,txt,zip,rar,圖片,視頻,音頻等等。下面看一下幾種常見文件格式的預(yù)覽效果。

1. word 預(yù)覽

2. ppt文檔預(yù)覽

3. pdf預(yù)覽

4. excel文檔預(yù)覽

5. 壓縮文件預(yù)覽

6. 多媒體文件預(yù)覽
7. 
8. 
   

2. 支持的格式

文檔在線預(yù)覽項(xiàng)目解決方案，項(xiàng)目使用流行的spring boot搭建，易上手和部署。萬能的文件預(yù)覽開源項(xiàng)目，基本支持主流文檔格式預(yù)覽，如：

1. 支持 doc, docx, xls, xlsx, xlsm, ppt, pptx, csv, tsv, dotm, xlt, xltm, dot, dotx,xlam, xla ,pages 等 Office 辦公文檔
2. 支持 wps, dps, et, ett, wpt 等國產(chǎn) WPS Office 辦公文檔
3. 支持 odt, ods, ots, odp, otp, six, ott, fodt, fods 等OpenOffice、LibreOffice 辦公文檔
4. 支持 vsd, vsdx 等 Visio 流程圖文件
5. 支持 wmf, emf 等 Windows 系統(tǒng)圖像文件
6. 支持 psd ,eps 等 Photoshop 軟件模型文件
7. 支持 pdf ,ofd, rtf 等文檔
8. 支持 xmind 軟件模型文件
9. 支持 bpmn 工作流文件
10. 支持 eml 郵件文件
11. 支持 epub 圖書文檔
12. 支持 obj, 3ds, stl, ply, gltf, glb, off, 3dm, fbx, dae, wrl, 3mf, ifc, brep, step, iges, fcstd, bim 等 3D 模型文件
13. 支持 dwg, dxf, dwf, iges , igs, dwt, dng, ifc, dwfx, stl, cf2, plt 等 CAD 模型文件
14. 支持 txt, xml(渲染), xbrl(渲染), md(渲染), java, php, py, js, css 等所有純文本
15. 支持 zip, rar, jar, tar, gzip, 7z 等壓縮包
16. 支持 jpg, jpeg, png, gif, bmp, ico, jfif, webp 等圖片預(yù)覽（翻轉(zhuǎn)，縮放，鏡像）
17. 支持 tif, tiff 圖信息模型文件
18. 支持 tga 圖像格式文件
19. 支持 svg 矢量圖像格式文件
20. 支持 mp3,wav,mp4,flv 等音視頻格式文件
21. 支持 avi,mov,rm,webm,ts,rm,mkv,mpeg,ogg,mpg,rmvb,wmv,3gp,ts,swf 等視頻格式轉(zhuǎn)碼預(yù)覽
22. 支持 dcm 等醫(yī)療數(shù)位影像預(yù)覽
23. 支持 drawio 繪圖預(yù)覽

3. 使用方法

kkfileView 是基于springboot 開發(fā)的項(xiàng)目，但是可以獨(dú)立部署，支持windows/linux/macos 等等平臺。我們這里以docker 方式部署為例，一鍵部署，幾乎0成本。

環(huán)境準(zhǔn)備 安裝docker centos7 安裝docker 命令

yum install docker

啟動docker

systemctl start docker

查看docker

docker -v

拉取kkfileView 鏡像

docker pull keking/kkfileview:4.1.0

運(yùn)行

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

查看運(yùn)行狀態(tài)

docker ps

kkfileview 部署成功

前端使用的話，把文件的url發(fā)送給kkfileview接口即可,代碼如下

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/js-base64@3.6.0/base64.min.js"></script>var url = 'http://127.0.0.1:8080/file/test.txt'; //要預(yù)覽文件的訪問地址window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(url)));

預(yù)覽效果

4.總結(jié)

kkfileView 是基于http協(xié)議進(jìn)行交互的。外部系統(tǒng)將需要預(yù)覽的文件url 發(fā)送給kkfileView，kkfileView 返回預(yù)覽的文件。這樣做的好處很明顯，不需要改造原有系統(tǒng)，降低開發(fā)成本，而且是語言無關(guān)性的，不同語言的項(xiàng)目也可以使用，比如php、.net、go 語言開發(fā)的項(xiàng)目等等。

5.相關(guān)鏈接

官網(wǎng)
http://kkfileview.keking.cn/zh-cn/index.html

gitee
https://gitee.com/kekingcn/file-online-preview?_from=gitee_search

github
https://github.com/kekingcn/kkFileView

文檔
http://kkfileview.keking.cn/zh-cn/docs/home.html