★ FEATURED ARTICLE 前端音视频【免费下载链接】open-file-viewerA framework-agnostic embedded file viewer for vanilla JavaScript, React, Vue and Svelte. Put PDF, Office, images, media, archives, email, drawings, 3D, GIS and engineering files inside one stable container.项目地址https://gitcode.com/gh_mirrors/op/open-file-viewer点击查看免费下载Open File Viewer 是一个跨框架的文件预览 SDK把 PDF、Office、图片、音视频、压缩包、邮件、图纸、3D、GIS 等格式放进同一个可控容器同时支持原生 JS、React、Vue 和 Svelte。它的核心设计是插件化每种文件格式由一个独立插件负责而插件要遵守的协议——PreviewPlugin——只有 3 个成员。读懂这个协议你只需要 50 行左右代码就能让自己的私有格式或业务文件格式也进入统一的预览容器 。为什么用插件架构一个容器N 种格式大多数业务系统最终都需要附件预览合同、表格、图纸、压缩包、邮件……如果每种格式都写一套预览逻辑容器、加载态、错误态、工具栏、多文件队列这些能力就得重复实现。Open File Viewer 的做法是把这些公共能力全部收敛到 viewer.ts 里的createViewer()容器中插件只负责回答两个问题这个文件是不是我的match怎么把它渲染进容器render内置插件与格式的对应关系如下类别插件代表格式图片imagePlugin()jpg、png、webp、avif、svg、heic视频 / 音频videoPlugin()、audioPlugin()mp4、webm、mp3、flac文本 / 代码textPlugin()txt、md、json、js、py、sqlPDF / 电子书pdfPlugin()、epubPlugin()、xpsPlugin()pdf、epub、xpsOffice / OFDofficePlugin()、ofdPlugin()docx、xlsx、pptx、ofd工程 / 专业格式cadPlugin()、model3dPlugin()、gisPlugin()、drawingPlugin()、xmindPlugin()dxf、dwg、glb、kml、drawio、xmind压缩包 / 邮件archivePlugin()、emailPlugin()zip、rar、eml资产识别assetPlugin()psd、sqlite、wasm、parquet完整插件列表见 index.ts 的导出每个插件都遵循同一套协议行为因此可以互相替换、裁剪和扩展。拆解 PreviewPlugin 接口只有 3 个成员整个插件协议的定义在 types.ts短到可以一眼看完export interface PreviewPlugin { name: string; match: (file: PreviewFile) boolean | Promiseboolean; render: (ctx: PreviewContext) PromisePreviewInstance | PreviewInstance; }逐个理解这三个成员name插件的唯一标识用于日志与调试。内置插件分别叫image、fallback等。注意一个特殊约定名为fallback的插件在支持性检测中有终止性含义自定义插件不要占用这个名字。match判断文件是否归你管入参是一个已经归一化好的PreviewFile对象定义见 types.ts包含source、name、extension、mimeType、size等字段。文件归一化逻辑由 detect.ts 的normalizeFile()完成它会根据扩展名自动补全 MIME 类型所以插件里可以直接读file.extension和file.mimeType。一个典型的匹配逻辑可以看 image.ts 的实现——先看 MIME 是否以image/开头再兜底查扩展名白名单同时排除dxf这类名字叫图像但其实不是的格式。match允许返回Promiseboolean因此你也可以在匹配阶段做异步探测比如读文件头几个字节判断魔数。render真正干活的渲染函数render接收一个PreviewContext返回一个PreviewInstance可以是同步对象也可以是 Promise。前者决定往哪画后者决定容器如何回收你。渲染上下文 PreviewContext容器给了你什么render收到的ctx对象定义在 types.ts它把容器侧的所有能力一次性交到你手上字段作用ctx.host/ctx.viewport预览宿主与内容视口你的渲染目标ctx.file当前文件的归一化信息PreviewFilectx.size视口当前宽高PreviewSizectx.options完整的预览配置fit、fallback、zoom、messages 等ctx.toolbar工具栏上下文可读取文件、索引、缩放状态ctx.signalAbortSignal本次渲染被新请求取代或容器销毁时触发中止ctx.setLoading/ctx.setError控制容器的加载态与错误展示容器还会自动帮你做脏活累活多文件队列切换next()/previous()、响应式尺寸监听、工具栏按钮的启用/禁用、主题与国际化文案、打印前的preparePrint流程——这些全部发生在 viewer.ts 的renderFile()里插件完全不需要关心。返回值 PreviewInstance一份生命周期契约render必须返回一个PreviewInstance对象定义见 types.ts它只有 1 个必填成员 4 个可选能力export interface PreviewInstance { resize?: (size: PreviewSize) void; // 容器尺寸变化时响应 goToPage?: (page: number) boolean; // 分页预览跳转1 基 command?: (command: PreviewCommand) void | boolean; // 响应缩放/旋转指令 canCommand?: (command: PreviewCommand) boolean; // 声明哪些指令可用 preparePrint?: () void | Promisevoid; // 打印前准备好懒加载内容 destroy: () void; // 必填清理一切副作用 }resize(size)窗口或布局变化时容器会调用它Canvas/WebGL 类插件必须实现。command/canCommand容器内置了滚轮、捏合手势缩放见 viewer.ts 的手势安装逻辑如果你的预览支持zoom-in、rotate-right等指令实现这两个方法后工具栏和手势会自动联动。destroy()这是硬性约定。切文件、销毁容器时容器都会调用它你要在这里移除 DOM、断开事件监听、撤销 object URL、停止 Worker、释放 Canvas/WebGL 资源。插件匹配机制顺序、兜底与预检查容器如何从一堆插件里选出渲染者逻辑在 viewer.ts 的findPlugin()非常直白按你传入数组的顺序依次调用match()第一个返回true的插件胜出。两个关键细节fallbackPlugin()自动垫底。渲染时容器会自动在你的插件列表末尾追加 fallback 插件它的match()永远返回true。未命中任何原生插件的文件会走到这里展示格式不支持 下载面板或你通过renderFallback提供的自定义渲染保证任何文件都不会白屏。顺序即优先级。csv同时能被textPlugin()和officePlugin()命中——想让表格走电子表格样式就把officePlugin()放在前面。如果你在挂载预览器之前就想判断这个文件能不能预览可以用 support.ts 导出的isPreviewSupported()。它复用同一套match()顺序做纯检查不挂载任何 DOM、不调用render()且fallbackPlugin()命中不算原生支持——非常适合做可在线预览 / 请下载这类 UI 分流。实战50 行代码接入一个新格式假设业务里有一种.ticket格式的工单文件想在预览容器里展示。参照 README.md 中的 Plugin Development 章节完整实现如下import type { PreviewPlugin } from open-file-viewer/core; export function ticketPlugin(): PreviewPlugin { return { name: ticket, match(file) { return file.extension ticket; }, async render(ctx) { const panel document.createElement(div); panel.className ticket-preview; panel.textContent 工单${ctx.file.name}; ctx.viewport.append(panel); return { resize(size) { // 视口尺寸变化时重排例如缩放画布 }, destroy() { panel.remove(); } }; } }; }然后在创建预览器时把它插进插件列表的合适位置fallbackPlugin()永远放最后const viewer createViewer({ container: #viewer, file: ticketFile, fileName: TK-2026-001.ticket, width: 100%, height: 70vh, toolbar: true, plugins: [imagePlugin(), textPlugin(), ticketPlugin(), pdfPlugin({ workerSrc }), fallbackPlugin()] });就这么简单match圈定管辖范围render画进ctx.viewport返回的对象负责自清理——整个流程不超过 50 行。React / Vue / Svelte 侧只需把同一个插件数组传给各自适配器组件如FileViewer plugins{plugins} /四端行为完全一致示例见 examples/ 下的 vanilla、react、vue、svelte 四个工程。如果格式更复杂比如私有二进制协议同样够用在render里fetch你后端的转换接口、拿回 SVG/PNG 或 PDF 再渲染即可容器已经替你处理了加载中、错误、多文件切换与资源销毁的时机。插件开发清单5 条铁律来自 README.md 的 Plugin constraints也是核心源码实际执行的约定✅只往ctx.viewport里渲染不要动ctx.host或外部 DOM✅默认不打开新窗口一切展示留在容器内✅需要响应尺寸变化就实现resize(size)✅实现destroy()清理事件、object URL、定时器、Canvas/WebGL 等所有副作用✅尊重ctx.signal切换文件时本次渲染会被中止长任务应在关键节点检查signal.aborted相关源码速查文件说明types.tsPreviewContext、PreviewInstance、PreviewPlugin三大接口定义viewer.tsrenderFile()加载态、插件选择、实例挂载与错误处理viewer.tsfindPlugin()按顺序match()fallback 垫底detect.tsnormalizeFile()扩展名 → MIME 归一化support.tsisPreviewSupported()挂载前预判支持性fallback.ts兜底插件不支持格式的下载面板lite.ts轻量入口仅含运行时 图片 PDF fallbackplugins/全部内置格式插件实现是最好的活教材想深入时建议直接打开 image.ts 或 cad.ts 这类内置插件对照协议读一遍——它们分别代表了最简单和最复杂两端的插件写法。协议本身保持如此精简正是 Open File Viewer 能让任何新格式以最小成本融入统一预览容器的原因。赞分享前端音视频【免费下载链接】open-file-viewerA framework-agnostic embedded file viewer for vanilla JavaScript, React, Vue and Svelte. Put PDF, Office, images, media, archives, email, drawings, 3D, GIS and engineering files inside one stable container.项目地址https://gitcode.com/gh_mirrors/op/open-file-viewer点击查看免费下载相关推荐DLSS Swapper 完全指南5 分钟完成游戏 DLSS 版本替换、回退与效果验证DLSS Swapper 完全指南5 分钟完成游戏 DLSS 版本替换、回退与效果验证 DLSS Swapper 是一款开源的图形加速库管理工具可以下载并管桌面应用Smart-Admin文件预览file-preview组件与格式支持全解析Smart Admin文件预览file preview组件与格式支持全解析 引言你还在为文件预览功能头疼吗 企业级应用开发中文件预览功能往往面临格式繁杂后端前端低代码认证鉴权移动开发PP-OCRv6_tiny_rec数据预处理与后处理CTCLabelDecode技术深度解析PP OCRv6_tiny_rec数据预处理与后处理CTCLabelDecode技术深度解析 PP OCRv6_tiny_rec_safetensors是飞桨创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
阅读完成 · 觉得有帮助？
