前端音视频【免费下载链接】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 文件放进同一个容器里预览支持原生 JavaScript、React、Vue 和 Svelte。如果你的项目只需要图片和 PDF 预览它专门提供了一个open-file-viewer/core/lite轻量入口——用它替换完整入口就能给打包体积做一次明显的瘦身。 为什么文件预览 SDK 会变重Open File Viewer 的设计思路是插件化每种文件格式由一个独立插件负责。完整入口 packages/core/src/index.ts 会导出全部能力——类别插件图片、视频、音频imagePlugin、videoPlugin、audioPlugin文本/代码、PDF、电子书textPlugin、pdfPlugin、epubPlugin、xpsPluginOffice、OFD、压缩包、邮件officePlugin、ofdPlugin、archivePlugin、emailPlugin图纸、思维导图、CAD、3D、GISdrawingPlugin、xmindPlugin、cadPlugin、model3dPlugin、gisPlugin兜底fallbackPlugin而核心包的依赖树也随之变得丰满packages/core/package.json 中声明了three、leaflet、xlsx、mammoth、mermaid、jszip等一批较重的库。问题来了一个只预览合同 PDF 和图片的业务页面为什么要为 CAD 引擎、3D 模型和 GIS 地图支付体积成本这些代码会跟着首屏一起下载却可能永远用不上。 lite 轻量入口里到底有什么lite是一个独立的构建产物源码在 packages/core/src/lite.ts它只导出 5 样东西导出作用createViewer创建预览器工具栏、主题、多文件队列等能力全部保留isPreviewSupported挂载前判断文件是否有可用预览路径imagePlugin图片预览jpg、png、webp、svg、tiff、heic 等pdfPluginPDF 预览含搜索、页码跳转、加密提示fallbackPlugin不支持的格式显示下载兜底页预览器的容器、工具栏、loading/error 状态、响应式尺寸等运行时能力一点没少少掉的只是你不需要的格式插件。样式文件open-file-viewer/core/style.css在两个入口间共用见 packages/core/package.json 的exports定义。 两个入口怎么选速查表判断维度用lite用完整入口需要预览的格式图片 PDF含 Office、压缩包、邮件、CAD、3D、GIS 等依赖树只带 PDF 运行时带入全部插件及其解析依赖典型场景合同/发票/图片附件预览文档协作平台、工程图纸系统一句话原则按需取用不要全都要。官方文档中也有同样的建议可参考 README.zh-CN.md 中Angular CLI 20 图片与 PDF 轻量入口一节。⚡ 三步切换到 lite 入口给打包瘦身第 1 步确认依赖没变pnpm add open-file-viewer/core pnpm add pdfjs-distlite 和完整入口都装在同一个包里不需要额外安装。第 2 步把 import 路径从core改成core/liteimport { createViewer, fallbackPlugin, imagePlugin, pdfPlugin } from open-file-viewer/core/lite; import open-file-viewer/core/style.css; const viewer createViewer({ container: #viewer, file: fileOrUrl, fileName: contract.pdf, width: 100%, height: 70vh, theme: auto, plugins: [imagePlugin(), pdfPlugin(), fallbackPlugin()] });用法和完整入口完全一致只是插件列表更短。第 3 步检查构建产物运行一次vite build并查看 chunk 报告。对 Vite 用户尤其值得这么做Vite 的依赖预构建optimizeDeps会遍历你入口能静态到达的整个依赖图——只要入口引用了完整coreOffice 转换链路上的依赖就可能被预构建和打进包里。改走lite后优化器根本不会进入那条依赖链这是官方专门说明过的场景packages/core/README.md。⚠️一条硬规则同一个应用内不要混用core和core/lite两个入口保持唯一来源即可见 packages/core/README.md。 官方如何保证 lite 真的轻这不是口头承诺仓库里有自动化测试把关构建产物断言packages/core/src/optional-peer-build.test.ts 用 esbuild 把lite.ts打进内存 bundle 后检查依赖清单中必须包含image.ts、pdf.ts且不得出现office.ts、emf-converter等 Office 链路依赖。lite 入口一旦被污染测试直接失败。PDF 引擎按需加载packages/core/src/plugins/pdf.ts 中pdfjs-dist采用动态import()只有第一个 PDF 真正开始渲染时才会拉取 PDF 引擎进一步把体积成本推迟到使用时。 什么时候该回到完整入口当业务出现这些需求时切回open-file-viewer/coreOffice 文档docx、xlsx、pptx甚至旧版ppt/wpsofficePlugin压缩包与邮件zip、eml、msgarchivePlugin、emailPlugin工程图纸dxf、dwg、step、gdscadPlugin3D 与 GISgltf、obj、geojson、shpmodel3dPlugin、gisPlugin完整格式覆盖矩阵见 README.zh-CN.md 的格式覆盖表格。切换后同样建议用isPreviewSupported在挂载前做能力探测它对 lite 和完整入口都可用。✅ 打包瘦身检查清单业务只涉及图片和 PDF → 入口已改为open-file-viewer/core/lite全项目只有一个 core 入口来源没有混用style.css只 import 一次构建报告里确认 Office/CAD/GIS 相关依赖不再出现pdfjs-dist已安装PDF 预览必需小结Open File Viewer 的lite入口是预览器能力不减、格式插件按需的瘦身方案——图片 PDF 的场景用它重格式交给完整入口。想深入了解插件体系可以看核心包文档 packages/core/README.md 和快速开始示例 examples/vanilla/src/main.ts。赞分享前端音视频【免费下载链接】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 完整指南网页文件预览为何一直没有标准方案Open File Viewer 多格式文件预览 SDK 完整指南 Open File Viewer 是一个面向现代 Web前端音视频Open File Viewer 路线图解读从 1.0 到 3.0一个文件预览 SDK 的演进路线Open File Viewer 路线图解读从 1.0 到 3.0一个文件预览 SDK 的演进路线 Open File Viewer 是一个框架无关的文件预前端音视频Svelte 也能轻松预览文件Open File Viewer Svelte 适配器快速上手教程Svelte 也能轻松预览文件Open File Viewer Svelte 适配器快速上手教程 Open File Viewer 是一款框架无关的嵌入式文件前端音视频创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考