File Viewer插件生态系统：preset-all、preset-office、preset-engineering详解

【免费下载链接】file-viewerBrowser-native Office / PDF / CAD / archive viewer for internal web apps, with Vue, React, Svelte, jQuery, Web Components, and no server-side conversion.项目地址: https://gitcode.com/gh_mirrors/file/file-viewer

File Viewer是一款基于浏览器原生技术的文件查看器，支持Office、PDF、CAD和归档文件等多种格式，无需服务器端转换即可在Web应用中直接使用。本文将详细解析其插件生态系统中的三个核心预设包：preset-all、preset-office和preset-engineering，帮助开发者根据项目需求选择最适合的文件查看解决方案。

什么是File Viewer预设包？

预设包（Preset）是File Viewer生态系统中的核心组件，它们预打包了特定类型的文件渲染器，使开发者能够快速集成所需的文件查看功能。每个预设包针对不同的使用场景进行了优化，提供了开箱即用的文件处理能力。

File Viewer主界面展示了其直观的文件浏览和预览功能，支持多种文件格式的统一管理

preset-office：办公文档的完美解决方案

preset-office是针对办公场景优化的预设包，专注于处理常见的办公文档格式。它包含了PDF、Word、Excel、PowerPoint、OFD和RTF等文件类型的渲染器，满足日常办公文档的在线预览需求。

preset-office支持的文件格式

• 文档类：PDF、Word（DOC/DOCX）、RTF、OFD
• 电子表格：Excel（XLS/XLSX）、OpenDocument表格
• 演示文稿：PowerPoint（PPT/PPTX）

快速集成指南

要在项目中使用preset-office，只需通过npm安装相关包：

npm i @file-viewer/vue3 @file-viewer/preset-office

然后在代码中导入并使用：

import officePreset from '@file-viewer/preset-office' // 在File Viewer配置中应用预设 const viewer = createFileViewer({ preset: officePreset, // 其他配置项... })

preset-office特别适合企业OA系统、文档管理平台和在线协作工具，提供了高质量的办公文档渲染体验。

preset-engineering：工程文件的专业查看工具

preset-engineering是面向工程领域的专业预设包，专注于处理各类工程文件格式。它集成了CAD图纸、3D模型、思维导图、地理信息和电子设计等专业文件的渲染器，满足工程设计和技术文档的在线预览需求。

preset-engineering支持的文件格式

• 工程图纸：CAD（DWG/DXF）、3D模型（STL/OBJ/STEP）
• 技术文档：XMind思维导图、Typst排版文件
• 专业数据：Geo地理信息、EDA电子设计、Archive归档文件

preset-engineering为制造业、建筑行业、地理信息系统和电子设计等领域提供了专业的文件查看解决方案，无需安装专业软件即可在浏览器中查看复杂的工程文件。

preset-all：全功能文件查看解决方案

preset-all是File Viewer的完整预设包，包含了所有官方支持的文件渲染器。它集成了preset-office和preset-engineering的全部功能，同时还包括媒体文件、文本文件和其他特殊格式的支持，提供一站式的文件查看解决方案。

preset-all的优势

• 全面支持：覆盖所有官方支持的文件格式
• 一步集成：无需考虑不同预设包的组合问题
• 完整体验：包含所有高级功能和渲染优化

File Viewer加载演示展示了文档预览环境的准备过程，体现了其高效的渲染性能

适用场景

preset-all特别适合以下场景：

• 演示环境和功能展示
• 管理后台和全能型文件浏览器
• 企业级全格式工作台

安装preset-all的命令如下：

npm i @file-viewer/vue3 @file-viewer/preset-all

如何选择适合的预设包？

选择预设包时，应根据项目需求和目标受众综合考虑：

按功能需求选择

• 办公场景：优先选择preset-office
• 工程场景：优先选择preset-engineering
• 全功能需求：选择preset-all

按性能考虑

• 轻量级应用：选择特定场景的预设包（preset-office或preset-engineering）
• 功能优先：选择preset-all

组合使用

File Viewer还支持多个预设包的组合使用，例如同时加载办公和工程预设：

import officePreset from '@file-viewer/preset-office' import engineeringPreset from '@file-viewer/preset-engineering' // 组合多个预设 const viewer = createFileViewer({ preset: [officePreset, engineeringPreset], // 其他配置项... })

预设包的实现与扩展

File Viewer的预设包本质上是渲染器的集合，每个预设包都位于packages目录下，如packages/renderers/目录包含了所有官方渲染器的实现。

开发者可以通过以下方式扩展预设包功能：

1. 使用官方提供的独立渲染器
2. 开发自定义渲染器
3. 创建自定义预设包

总结

File Viewer的插件生态系统通过预设包机制，为不同场景提供了灵活的文件查看解决方案。preset-office专注于办公文档，preset-engineering面向工程文件，而preset-all则提供全功能支持。开发者可以根据项目需求选择合适的预设包，或组合使用多个预设包，以实现最佳的文件查看体验。

无论是企业办公系统、工程设计平台还是通用文件管理工具，File Viewer的预设包都能提供高效、可靠的文件预览功能，帮助开发者快速构建专业的Web文件查看应用。

要开始使用File Viewer，只需克隆仓库并安装所需的预设包：

git clone https://gitcode.com/gh_mirrors/file/file-viewer cd file-viewer npm install @file-viewer/preset-all # 或其他预设包

探索docs/guide/目录下的官方文档，获取更多关于预设包使用和自定义的详细信息。

【免费下载链接】file-viewerBrowser-native Office / PDF / CAD / archive viewer for internal web apps, with Vue, React, Svelte, jQuery, Web Components, and no server-side conversion.项目地址: https://gitcode.com/gh_mirrors/file/file-viewer