跪拜 Guibai
← All articles
Frontend · Vue.js

Flyfish Viewer Handles 206 Office File Formats Where pdf.js and pptx.js Fall Short

By 唐一科 ·
Read original on juejin.cn ↗ Google Translate ↗ Alt translation

Office file preview in the browser remains a fragmented problem: pdf.js ignores .doc/.xls, and many commercial viewers are expensive or require server-side conversion. Flyfish Viewer fills that gap with a single client-side bundle that covers formats most free libraries skip, and the local-dist workaround solves the CDN sub-resource failure that blocks PPTX rendering.

Summary

Flyfish Viewer is a browser-based document preview library that maps 206 file extensions across 24 rendering chains, including legacy .doc and .xls formats that pdf.js and pptx.js cannot open. It ships as a pure-JS IIFE bundle, a Vue wrapper, and a Web Component, so integration works even in older projects where npm installs fail.

A common pitfall is that the PPTX worker fails when loading from a CDN because a required sub-resource 404s. The fix is to download the entire dist folder, place it in the project's public directory, and reference the IIFE script locally. A full Vue 2.6 dialog component wraps the viewer with fullscreen toggle, loading states, and event hooks for load-start, load-complete, and errors.

The library accepts a file URL and optional filename, renders inside a target div, and exposes a toolbar and theme option. The component code provided handles edge cases like missing file extensions by inferring the extension from the URL.

Takeaways
Flyfish Viewer supports 206 file extensions and 24 preview chains, including .doc, .xls, and .stl files that pdf.js and pptx.js cannot render.
The npm packages for Vue 2.6 failed to install in a legacy project, so the pure-JS IIFE integration was used instead.
PPTX preview fails when loaded from the CDN because a worker sub-resource 404s; downloading the entire dist folder and serving it locally fixes the issue.
A complete Vue 2.6 dialog component wraps the viewer with fullscreen toggle, loading spinners, and event callbacks for load-start, load-complete, and errors.
The viewer is mounted by calling FlyfishFileViewerWebFull.mountViewer() on a target DOM element, passing a URL, filename, theme, and toolbar options.
Conclusions

The PPTX worker failure from CDN is a concrete deployment gotcha that isn't documented in the official guide, and the local-dist workaround is a practical fix that avoids debugging Web Worker cross-origin or path-resolution issues.

Legacy Vue 2.6 projects often hit npm resolution dead-ends with modern packages; falling back to a vanilla JS IIFE and dropping the bundle into /public is a reliable pattern that sidesteps dependency hell entirely.

Office preview libraries that claim broad format support often break on specific file types in production; the fact that .pptx failed while .doc and .xls worked suggests the rendering chain for modern Office formats has stricter resource-loading requirements.

Concepts & terms
IIFE
Immediately Invoked Function Expression — a JavaScript function that runs as soon as it is defined. Libraries shipped as IIFE bundles attach themselves to the global window object, making them usable without a module bundler.
Web Worker
A browser feature that runs scripts in background threads, separate from the main UI thread. Flyfish Viewer uses a worker to parse PPTX files; if the worker script fails to load from a CDN, preview breaks.
Source: juejin.cn ↗ Google Translate ↗ Backup ↗