allfile‑preview|一款适配局域网,开箱即用的前端统一文件预览方案

在内网、局域网业务系统开发中,文件预览一直是非常头疼的痛点。

很多现有预览组件依赖构建工具、需要引入一堆零散依赖库;在内网离线环境下,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系统、内网文档管理、局域网网盘、本地工具页面、私有化项目:

  1. 离线环境,无外网访问,不依赖外部网络资源
  2. 不想搭建后端转码服务,全部前端浏览器本地解析
  3. 快速原型页面、内网小工具,不想搭建工程化构建环境,直接html+script引入即用
  4. 保护文件隐私,文件数据不会上传第三方服务,全部在前端浏览器处理

🚀快速上手

只需要一行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支持项目持续迭代。


如果你需要,我可以再帮你输出简短掘金版本(适合发布社区) 、朋友圈/技术群短宣传文案两个版本。

相关推荐
中文呀1 小时前
三维 GIS 离线缓存实战:逆向 CesiumOfflineCache,并亲手为它补上"自动更新"能力
前端
前进前进前进2 小时前
TRAE 全链路实战:做了一个警示牌一键生成器:纯 Canvas、单文件、零依赖
前端
小万7423 小时前
God‘s Eye View 深度解析:15 路公开信号 + CesiumJS 的浏览器级 OSINT 控制台,60 帧渲染的“真实间谍卫星模拟器”
前端
IT星宿3 小时前
浏览器标签页全是一个图标:我用名字哈希生成 favicon,让每个项目都有身份标识
前端
全栈项目管理程序猿3 小时前
ArcGIS JS 基础教程(32):体元系列 - VoxelSlice 体元切片
前端·javascript
拖孩5 小时前
AI 帮我写的小程序「厨菜记」上线满月了,挣了两百块!!!
前端·后端·微信小程序
用户360055579005 小时前
Kestrel_VLLM - 13 · 为什么排除 MoE FFN Tiling 与 Tensor Core
前端
Hilaku6 小时前
AI 流式输出都用 SSE,什么时候必须换 WebSocket?
前端·javascript·程序员
奇牙coding6 小时前
Codex CLI 升级后多文件编辑静默失效:config.yaml 枚举变更排查与修复指南
java·前端·javascript·ai
小羊没烦恼!6 小时前
Ajax与JSON的一些总结
android·java·前端·数据库·mysql·算法·okhttp