开篇 ✨
📝 做全栈开发的同学都懂，文件在线预览是个“看似简单实则坑多”的需求——既要支持多格式，又要兼顾稳定性，还得考虑开发成本。市面上可选的方案不少，其中开源社区里，老牌kkFileView在开源社区中较为成熟，被广泛使用。而一个名为BaseMetas Fileview的开源在线文件预览引擎也已在近日开源，于是便简单体验了下~
⚙️一、文件支持格式
作为文件预览工具的核心能力，两款产品在主流格式大部分均已覆盖，日常开发遇到的大部分文件场景都能hold住预览。
✨ 共性：主流格式支持对比
无论是Office全家桶（doc/docx、xls/xlsx、ppt/pptx等）、PDF、主流图片格式（jpg/png/gif等），还是文本文件（txt/md等），两款工具都能支持预览，无需额外开发适配逻辑。
kkFileVView：
支持 doc, docx, xls, xlsx, xlsm, ppt, pptx, csv, tsv, dotm, xlt, xltm, dot, dotx,xlam, xla 等 Office 办公文档
支持 wps, dps, et, ett, wpt 等国产 WPS Office 办公文档
支持 odt, ods, ots, odp, otp, six, ott, fodt, fods 等OpenOffice、LibreOffice 办公文档
支持 vsd, vsdx 等 Visio 流程图文件
支持 wmf, emf 等 Windows 系统图像文件
支持 psd 等 Photoshop 软件模型文件
支持 pdf ,ofd, rtf 等文档
支持 xmind 软件模型文件
支持 bpmn 工作流文件
支持 eml 邮件文件
支持 epub 图书文档
支持 obj, 3ds, stl, ply, gltf, glb, off, 3dm, fbx, dae, wrl, 3mf, ifc, brep, step, iges, fcstd, bim 等 3D 模型文件
支持 dwg, dxf 等 CAD 模型文件
支持 txt, xml(渲染), md(渲染), java, php, py, js, css 等所有纯文本
支持 zip, rar, jar, tar, gzip, 7z 等压缩包
支持 jpg, jpeg, png, gif, bmp, ico, jfif, webp 等图片预览（翻转，缩放，镜像）
支持 tif, tiff 图信息模型文件
支持 tga 图像格式文件
支持 svg 矢量图像格式文件
支持 mp3,wav,mp4,flv 等音视频格式文件
支持 avi,mov,rm,webm,ts,rm,mkv,mpeg,ogg,mpg,rmvb,wmv,3gp,ts,swf 等视频格式转码预览
BaseMetas Fileview：
**版式文档类**
doc, docx, dot, dotx, dotm, docm, wps, wpt, rtf, txt
md, markdown, mdown, mkd, mkdn, mdwn, mdtxt, mdx, html, htm, xml, xsd, xsl, xslt, tex, ltx, bib, cls, sty, ins, dtx, rst, log, conf
xls, xlsx, xlsm, xlt, xltx, xltm, ods, ots, fods, xla, xlam, et, ett, csv
ppt, pptx, dps, dpt, pptm, pot, potx, potm, odp, otp, fodp
pdf, ofd
**图片类**
jpg, jpeg, png, webp, gif, svg
bmp, psd, tif, tiff, tga, emf, wmf
**音视频类**
mp3, m4a, wav, aac, ogg, flac, ac3, au, wma, aif, aifc, aiff
mp4, webm, avi, mkv, mov, flv, m4v, mpg, mpeg, m2v, m4p, mj2, ogv, qt, vob, wmv
**压缩包类**
zip, jar, rar, 7z, tar, tar.gz, tgz
**CAD/工程图类**
dwg, dxf
**3D模型类**
gltf, glb, obj, stl, fbx, ply, dae, wrl, 3ds, 3mf, 3dm
**流程图/思维导图类**
vsd, vsdm, vsdx, vssm, vssx, vstm, vstx
bpmn, drawio, xmind
**代码/脚本类**
- 前端：js, jsx, mjs, cjs, ts, tsx, vue, svelte, css, scss, sass, less
- 后端：java, jsp, jspx, jhtml, tag, groovy, gvy, gsh, grvy, scala, sc, kt, kts, c, cpp, cc, cxx, h, hpp, hxx, hh, cs, cshtml, razor
- 脚本语言：py, pyw, pyt, pyx, pyo, rpy, go, gomod, gohtml, php, php3, php4, php5, phtml, phpt, rb, rake, thor, ru, lua, r, rmd, rnw, rs, swift, dart, pl, pm, t, pod, erl, hrl, ex, exs, hs, lhs
- Shell/Bash：sh, bash, zsh, fish, ksh, csh, tcsh, bashrc, bash_profile, cmd
- 汇编/底层：asm, s
- Objective-C：m, mm, objc, objcpp
- 配置/数据格式：json, geojson, ldjson, json5, yaml, yml, sql, pgsql, sqlite, db, db3, dsql, gradle, cmake, gyp, tf, tfvars, hcl, Dockerfile, gitignore, conf, nginx
- 模板引擎：ejs, jade, pug, vbhtml
- 其他配置：schema, http, rest
**📚 电子书类**
epub
🚀二、部署方式
部署成本直接影响开发效率，两款工具都提供了主流的docker部署方式。kkFileview额外支持物理机或虚拟机本地部署。其中kkFileview开源社区不再提供发行包（需加入知识星球），用户需要自行下载源码进行编译发行包（Maven：3.4+）。
📌 kkFileView
拉取镜像：docker load -i kkFileView-4.4.0-docker.tar
运行镜像：docker run -it -p 8012:8012 keking/kkfileview:4.4.0
（浏览器访问 http://127.0.0.1:8012 即可）
📌 BaseMetas Fileview
仅提供docker镜像，目前支持AMD64和ARM64架构。
拉取镜像：docker pull basemetas/fileview:latest
运行镜像：docker run -itd \
--name fileview \
-p 9000:80 \
--restart=always \
basemetas/fileview:latest
（浏览器访问 http://127.0.0.1:9000 即可）
🏗️三、架构设计
🔧 kkFileView：工厂模式+策略模式，工程化成熟
核心采用“工厂模式+策略模式”的经典组合，通过FilePreviewFactory工厂类统一管理所有文件类型的预览处理器，每种格式对应专属的FilePreview实现类。
架构特点：
- • 解耦彻底：通过Spring容器实现对象创建与使用的解耦，无需大量if-else判断文件类型；
- • 聚焦“独立模块”：整体架构偏向“拿来即用的工具”，适合作为独立模块嵌入项目，无需过多改造。
🔧 BaseMetas Fileview：模块化拆分，平台化定位
从设计之初就定位为“可演进的文档预览底座”，架构上明确拆分四大核心模块：预览服务、调度中心、转换执行服务、转换引擎池，通过事件机制实现模块解耦。
架构特点：
- • 可替换性强：转换引擎池支持多引擎并存与替换，比如可根据需求切换LibreOffice、OpenOffice或自定义引擎；
- • 聚焦“二次开发”：提供清晰的服务边界和抽象层，适合作为子系统深度集成到业务中，而非单纯的独立工具。
🏗️四、使用方式
两者在使用方式区别不大，都是通过构造预览地址后，使用预览接口进行文件预览。
kkFileview：
<!--通过文件url地址进行预览-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/js-base64@3.7.8/base64.min.js"></script>
var url = 'http://xxxxx/file/test.txt'; //要预览文件的访问地址
window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(url)));
<!--预览http、https下载流-->
var originUrl = 'http://xxxx/filedownload?fileId=1'; //要预览的下载流url文件的地址
var previewUrl = originUrl + '&fullfilename=test.txt'
window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(previewUrl)));
BaseMetas Fileview：
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/js-base64@3.7.8/base64.min.js"></script>
<!-- 使用 query 参数 -->
const url = encodeURIComponent("http://xxxx/sample.docx"); // 网络文件地址，支持 http/https/ftp
const fileName = encodeURIComponent("sample.docx"); // 真实文件名，用作文件类型判断，如果文件地址中没有正确文件后缀，则必须手动传递
const previewUrl = `http://127.0.0.1:9000/preview/view?url=${url}&fileName=${fileName}`;
window.open(previewUrl, "_blank");
<!-- 用 data 传递 json -->
// 构造参数
const opts = {
url: "https://xxxx/sample.docx", // 网络文件地址，支持 http/https/ftp
fileName: "sample.docx", // 真实文件名，用作文件类型辅助判断，如果文件地址中没有正确文件后缀，则需要手动传递
displayName: "示例文档", // 用于标题栏展示文件名，非必需
};
// 对参数进行base64编码
const base64Data = encodeURIComponent(Base64.encode(JSON.stringify(opts)));
// 构造预览地址
const previewUrl = `http://127.0.0.1:9000/preview/view?data=${base64Data}`;
window.open(previewUrl, "_blank");
🏗️五、最后
工具无好坏，适合自己的才是最好的。
感兴趣的小伙伴可以前往官网或部署体验~
400 186 1886
