在内网、局域网业务系统开发中,文件预览一直是非常头疼的痛点。
很多现有预览组件依赖构建工具、需要引入一堆零散依赖库;在内网离线环境下,CDN资源无法加载,组件直接失效;file://本地协议下浏览器安全策略限制fetch请求,本地文档打不开;PDF、Word、Excel、图片、音视频需要分别引入不同预览库,各套组件API不一致,接入繁琐,私有化部署要处理大量静态资源,维护成本居高不下。
allfile‑preview,开源UMD免构建文件预览插件,专门解决内网局域网场景下的各类文件预览难题,一个文件搞定全类型文档预览能力。
✨核心亮点
📦 UMD单文件,免构建,零打包依赖
直接通过script标签引入allfile‑preview.umd.cjs即可使用,不需要Vite、Webpack等构建工具。pdf.js、docx‑preview、SheetJS全部内置内联,不需要额外下载多个JS库。
局域网/离线私有化部署,只需要分发这一个文件,没有外部CDN依赖,断网环境照样工作。
🔐完美兼容file://本地协议,突破浏览器安全限制
很多预览库在本地双击打开html(file://协议)直接报错,浏览器禁止fetch读取本地文件。
allfile‑preview做了适配:选择本机文件后自动转为blob URL,全部解析运算在浏览器本地完成,不上传服务器,本地双击页面也能正常预览PDF、TXT、DOCX、XLSX文档;HTTP/局域网地址环境可直接传入内网资源URL预览文件。
📑多格式统一预览
一套组件覆盖绝大多数常见格式:
- 文档:PDF、TXT、DOCX、XLSX
- 多媒体:图片、视频、音频
一套统一调用方式,不用为不同文件格式维护多套预览逻辑,极大减少业务代码量。
🏭高度适配内网/局域网业务场景
非常适合OA系统、内网文档管理、局域网网盘、本地工具页面、私有化项目:
- 离线环境,无外网访问,不依赖外部网络资源
- 不想搭建后端转码服务,全部前端浏览器本地解析
- 快速原型页面、内网小工具,不想搭建工程化构建环境,直接html+script引入即用
- 保护文件隐私,文件数据不会上传第三方服务,全部在前端浏览器处理
🚀快速上手
只需要一行script标签引入,无需npm install,无需构建编译:
<script src="./allfile-preview.umd.cjs"></script>引入完成即可调用预览能力,双击本地HTML文件(file://协议)就能体验完整预览;部署内网web服务,填入局域网资源地址即可在线预览内网文档。
在线演示地址:https://allfile-preview.softinstall.top/
开源仓库(欢迎Star、Issue、PR):https://github.com/ankeji/allfile-preview
🎯适合谁?
- 前端开发者:内网项目、私有化系统,需要文档预览又不想维护后端转码服务
- 工具开发者:写本地HTML小工具,希望双击打开就能预览各类本地文件
- 企业内网系统:OA、档案、文档管理平台,追求离线可用、少依赖、易部署
- 不想引入重型预览组件,追求单文件、轻量、开箱即用的开发者
以往做内网文件预览,要么搭建复杂的后端文档转码服务,要么引入一堆碎片化预览库,还要处理file://协议各种浏览器限制。现在使用allfile‑preview,一个UMD文件,就把这些痛点全部抹平,本地、局域网环境都可以稳定实现统一文件预览。
开源项目欢迎大家试用反馈,如果对你有帮助,欢迎前往GitHub点Star支持项目持续迭代。
如果你需要,我可以再帮你输出简短掘金版本(适合发布社区)、朋友圈/技术群短宣传文案两个版本。