Open File Viewer v0.1.48: Finally Cracking Legacy doc/xls/ppt Preview in the Browser

The article introduces Open File Viewer , an open-source file preview library that recently reached v0.1.48 with 1.7K+ GitHub stars and 190 forks. The author explains why legacy Office formats ( doc, xls, ppt) have been the hardest to preview in web applications: unlike docx / xlsx / pptx (XML + ZIP), the old formats use complex binary structures containing images, tables, pagination, fonts, charts, and positioning data, making browser-side parsing extremely difficult.

Real-world systems (OA, ERP, archives) still contain thousands of such legacy files that cannot be converted en masse, and users simply expect them to open. To solve this, Open File Viewer now covers:

doc / docx / docm / rtf / odt
xls / xlsx / xlsm / xlsb / csv
ppt / pps / pptx / pptm / odp
wps / et / dps

The author highlights that doc now has a dedicated binary parsing pipeline handling body text, tables, pagination, and embedded images; xls enters a spreadsheet parser directly; and ppt / pps have their own legacy PowerPoint parsing logic. Version v0.1.48 also fixes several details: legacy DOC embedded images and layout, DOCX merged cell borders, Word binary pagination, and Office pie-chart labels and theme colors.

Vue 3 Integration

Installation is straightforward:

pnpm add @open-file-viewer/core @open-file-viewer/vue
# optional for PDF
pnpm add pdfjs-dist

Configure plugins (image, text, PDF, Office) and drop the <OpenFileViewer> component with :file, :plugins, width, height, and toolbar props. The business layer no longer needs to detect file types; the core automatically matches the appropriate plugin.

Framework-Agnostic Core

The project deliberately avoids framework lock-in. All preview capabilities live in @open-file-viewer/core, with thin adapters for:

Vanilla JavaScript
Vue
React
Svelte

Corresponding packages: @open-file-viewer/core, @open-file-viewer/vue, @open-file-viewer/react, @open-file-viewer/svelte. This benefits component libraries, low-code platforms, and polyglot teams by reusing a single preview engine.

Format Coverage and Philosophy

The repository's test matrix now covers 274 file extensions , including PDF, OFD, EPUB, XPS, images, audio/video, archives, email, XMind, Draw.io, CAD/DWG, 3D, GIS, PSD, AI, and more. The author acknowledges that not all 274 formats render with high fidelity; support depth varies. The goal is a unified preview pipeline: preview what can be previewed client-side, fall back gracefully for the rest, and delegate complex parsing to dedicated engines or server-side conversion — keeping the frontend entry point consistent.

Limitations and Hybrid Approach

Browser-side rendering can never 100% replicate Microsoft Office or WPS. Special fonts, complex headers/footers, text boxes, macros, revisions, and advanced Excel charts often degrade. Therefore Open File Viewer also supports a hybrid model: simple files preview directly in the browser; complex Office files are converted to PDF on the server, then displayed through the same Viewer component. The UI remains identical for users.

The author closes by noting that months of effort went into seemingly minor details — a border, an image, a pagination break, a decade-old Word document — which are precisely the pain points in backend systems (OA, ERP, approval, contract, knowledge-base, drive, archive). Developers facing these scenarios are encouraged to try the library and file issues.

Website: https://open-file-viewer-workspace.void.app/ GitHub: https://github.com/xushanpei/open-file-viewer npm Core: https://www.npmjs.com/package/@open-file-viewer/core npm Vue: https://www.npmjs.com/package/@open-file-viewer/vue npm React: https://www.npmjs.com/package/@open-file-viewer/react npm Svelte:

https://www.npmjs.com/package/@open-file-viewer/svelte