How a Single DIV Handles 110 File Formats – The Open File Viewer SDK Takes Off

Front‑end developers often juggle many separate libraries to preview PDFs, Word documents, Excel sheets, images, videos, CAD files, GIS data, and other formats, which leads to inconsistent UI, scattered code, and difficult maintenance.

To address this, the author evaluated Open File Viewer , a front‑end file preview SDK that consolidates all preview types into a single, controllable container. The SDK can be embedded in modals, drawers, detail pages, approval flows, or attachment centers without opening new pages or forcing downloads.

Supported Formats

Open File Viewer currently covers 110 file formats, including:

Images: jpg, png, gif, webp, svg, heic Videos: mp4, webm, mov, avi, mkv Audio: mp3, wav, flac, ogg Text/Code: txt, md, json, yaml, js, ts, vue, html, css, py, go, rs Documents: pdf, epub, xps, docx, xlsx, pptx, wps, et, dps Archives: zip, rar, 7z, tar Emails: eml, msg, mbox Drawings: dxf, dwg 3D Models: gltf, glb, obj, stl GIS: geojson, kml, gpx, shp Design assets and data files: psd, ai, sqlite, wasm, parquet The author emphasizes that coverage does not guarantee perfect fidelity for every format; basic formats like images, audio, and PDFs render well, while complex formats such as CAD, 3D models, and GIS receive basic to enhanced support.

Unified Architecture

The core idea is to place all previews into a framework‑agnostic core container, with thin adapters for Vanilla JavaScript, React, Vue, and Svelte. This allows old and new projects to share the same preview capabilities.

Customizable Toolbar

Default toolbar buttons are limited to download, fullscreen, and close, which is insufficient for business workflows that require approval, tagging, archiving, or marking as read. Open File Viewer lets developers modify button text, order, icons, add custom business buttons, or replace the entire toolbar, making it suitable for OA, CRM, ERP, and knowledge‑base products.

Plugin Mechanism

Instead of scattering conditional statements like:

PDF 走 PDF 逻辑
图片走图片逻辑
Word 走 Word 逻辑
压缩包走压缩包逻辑
都不支持就下载

the SDK delegates each file type to a dedicated plugin. Built‑in plugins include:

imagePlugin()
videoPlugin()
audioPlugin()
textPlugin()
pdfPlugin()
officePlugin()
archivePlugin()
emailPlugin()
drawingPlugin()
cadPlugin()
model3dPlugin()
gisPlugin()
fallbackPlugin()

Each plugin handles its respective format (e.g., imagePlugin() for images, pdfPlugin() for PDFs). Developers can also create custom plugins for proprietary formats such as .report, .logx, .schema, or .flow, avoiding cluttered business logic.

Key Benefits

110 + file formats covered

Supports Vue, React, Svelte, and vanilla JS

Customizable toolbar for business actions

Plugin mechanism with 15 + built‑in plugins

Ability to add custom plugins

Unified preview container and state handling

Consistent fallback strategy

For simple cases a single library may suffice, but for long‑term systems with growing attachment types, Open File Viewer provides a maintainable, extensible architecture.

Project links: website https://open-file-viewer-workspace.void.app/, GitHub https://github.com/xushanpei/open-file-viewer, npm https://www.npmjs.com/package/@open-file-viewer/core.