@file-viewer/vue2.7 2.0.10 → 2.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.en.md +55 -14
- package/README.md +55 -14
- package/package.json +10 -3
package/README.en.md
CHANGED
|
@@ -52,7 +52,8 @@ viewer.destroy()
|
|
|
52
52
|
|
|
53
53
|
## Capabilities
|
|
54
54
|
|
|
55
|
-
`@file-viewer/vue2.7` shares the same
|
|
55
|
+
`@file-viewer/vue2.7` shares the same core contract and renderer/preset assembly model with the other standard component packages; full capability can be assembled with on-demand renderers or `@file-viewer/preset-all`, including PDF, Word, Excel, PowerPoint, OFD, CAD/DWG/DXF/DWF, EPUB/UMD, archives, email, Markdown, highlighted code, images, audio, video, 3D models, geospatial files, and structured data assets. See the complete format matrix and option reference at https://doc.file-viewer.app/guide/formats
|
|
56
|
+
|
|
56
57
|
|
|
57
58
|
See the official documentation for the full format matrix, options, lifecycle hooks, beforeOperation, theme, watermark, search, zoom, print, and export APIs: https://doc.file-viewer.app/
|
|
58
59
|
|
|
@@ -61,22 +62,22 @@ Chinese README: [README.md](./README.md).
|
|
|
61
62
|
<!-- FILE_VIEWER_GENERATED:START -->
|
|
62
63
|
## Ecosystem Matrix
|
|
63
64
|
|
|
64
|
-
Every standard component package shares `@file-viewer/core` as the only common foundation, and no framework component package depends on another framework implementation. Core owns format metadata, source loading,
|
|
65
|
+
Every standard component package shares `@file-viewer/core` as the only common foundation, and no framework component package depends on another framework implementation. Core owns format metadata, source loading, the renderer protocol, events, operation APIs, search, zoom, print, and export. Heavy PDF, Word, PPTX, CAD, Typst, and similar pipelines are assembled explicitly through renderer packages or presets; each framework package owns its local controller, component lifecycle, type exports, and ecosystem-specific interaction layer.
|
|
65
66
|
|
|
66
67
|
| Framework | Standard npm package | Entrypoints | GitHub | Gitee | Historical aliases |
|
|
67
68
|
| --- | --- | --- | --- | --- | --- |
|
|
69
|
+
| Vanilla JS / Pure Web | `@file-viewer/web` | ESM, type declarations, script tag IIFE, worker/WASM viewer assets, asset copy CLI | [file-viewer-web](https://github.com/flyfish-dev/file-viewer-web) | [file-viewer-web](https://gitee.com/flyfish-dev/file-viewer-web) | `@flyfish-group/file-viewer-web` |
|
|
68
70
|
| Vue 3 | `@file-viewer/vue3` | ESM, type declarations | [file-viewer-vue3](https://github.com/flyfish-dev/file-viewer-vue3) | [file-viewer-vue3](https://gitee.com/flyfish-dev/file-viewer-vue3) | `@flyfish-group/file-viewer3`, `file-viewer3` |
|
|
69
71
|
| Vue 2.7 | `@file-viewer/vue2.7` | ESM, type declarations | [file-viewer-vue2.7](https://github.com/flyfish-dev/file-viewer-vue2.7) | [file-viewer-vue2.7](https://gitee.com/flyfish-dev/file-viewer-vue2.7) | `@flyfish-group/file-viewer` |
|
|
70
72
|
| Vue 2.6 | `@file-viewer/vue2.6` | ESM, type declarations | [file-viewer-vue2.6](https://github.com/flyfish-dev/file-viewer-vue2.6) | [file-viewer-vue2.6](https://gitee.com/flyfish-dev/file-viewer-vue2.6) | none |
|
|
71
73
|
| React 18/19 | `@file-viewer/react` | ESM, type declarations | [file-viewer-react](https://github.com/flyfish-dev/file-viewer-react) | [file-viewer-react](https://gitee.com/flyfish-dev/file-viewer-react) | `@flyfish-group/file-viewer-react` |
|
|
72
74
|
| React 16.8/17 | `@file-viewer/react-legacy` | ESM, type declarations | [file-viewer-react-legacy](https://github.com/flyfish-dev/file-viewer-react-legacy) | [file-viewer-react-legacy](https://gitee.com/flyfish-dev/file-viewer-react-legacy) | none |
|
|
73
|
-
| Pure Web | `@file-viewer/web` | ESM, type declarations, script tag IIFE, worker/WASM viewer assets, asset copy CLI | [file-viewer-web](https://github.com/flyfish-dev/file-viewer-web) | [file-viewer-web](https://gitee.com/flyfish-dev/file-viewer-web) | `@flyfish-group/file-viewer-web` |
|
|
74
75
|
| jQuery | `@file-viewer/jquery` | ESM, type declarations | [file-viewer-jquery](https://github.com/flyfish-dev/file-viewer-jquery) | [file-viewer-jquery](https://gitee.com/flyfish-dev/file-viewer-jquery) | none |
|
|
75
76
|
| Svelte | `@file-viewer/svelte` | Svelte component, ESM, type declarations | [file-viewer-svelte](https://github.com/flyfish-dev/file-viewer-svelte) | [file-viewer-svelte](https://gitee.com/flyfish-dev/file-viewer-svelte) | none |
|
|
76
77
|
|
|
77
78
|
## Format Support Matrix
|
|
78
79
|
|
|
79
|
-
The shared
|
|
80
|
+
The shared format matrix currently covers 24 preview pipelines and 206 file extensions. Full capability is assembled through renderer packages or presets, while component packages only adapt their own ecosystem without nesting through another framework implementation.
|
|
80
81
|
|
|
81
82
|
| Preview pipeline | Category | Extensions | Capabilities | Loading |
|
|
82
83
|
| --- | --- | --- | --- | --- |
|
|
@@ -90,20 +91,60 @@ The shared core currently covers 23 preview pipelines and 194 file extensions. R
|
|
|
90
91
|
| Typst | document | `.typ`, `.typst` | download, print(adapter), HTML export(adapter), zoom(provider), search | lazy async |
|
|
91
92
|
| Archive | archive | `.zip`, `.zipx`, `.7z`, `.rar`, `.tar`, `.gz`, `.gzip`, `.tgz`, `.bz2`, `.bzip2`, `.tbz`, `.tbz2`, `.xz`, `.txz`, `.lzma`, `.zst`, `.tzst`, `.cab`, `.ar`, `.cpio`, `.iso`, `.xar`, `.lha`, `.lzh`, `.jar`, `.war`, `.ear`, `.apk`, `.cbz`, `.cbr` | download, search | lazy async |
|
|
92
93
|
| Email | email | `.eml`, `.msg`, `.mbox` | download, HTML export, search | lazy async |
|
|
93
|
-
| EDA | eda | `.olb`, `.dra` | download, print, HTML export, search | lazy async |
|
|
94
|
+
| EDA | eda | `.olb`, `.dra`, `.gds`, `.oas`, `.oasis` | download, print, HTML export, search | lazy async |
|
|
94
95
|
| CAD | cad | `.dxf`, `.dwg`, `.dwf`, `.dwfx`, `.xps` | download, print, HTML export, zoom(provider) | lazy async |
|
|
95
|
-
| 3D Model | model | `.glb`, `.gltf`, `.obj`, `.stl`, `.ply`, `.fbx`, `.dae`, `.3ds`, `.3mf`, `.amf`, `.usd`, `.usda`, `.usdc`, `.usdz`, `.kmz`, `.step`, `.stp`, `.iges`, `.igs`, `.ifc`, `.3dm`, `.pcd`, `.wrl`, `.vrml`, `.xyz`, `.vtk`, `.vtp` | download, zoom(provider) | lazy async |
|
|
96
|
+
| 3D Model | model | `.glb`, `.gltf`, `.obj`, `.stl`, `.ply`, `.fbx`, `.dae`, `.3ds`, `.3mf`, `.amf`, `.usd`, `.usda`, `.usdc`, `.usdz`, `.kmz`, `.step`, `.stp`, `.iges`, `.igs`, `.ifc`, `.3dm`, `.brep`, `.pcd`, `.wrl`, `.vrml`, `.xyz`, `.vtk`, `.vtp` | download, zoom(provider) | lazy async |
|
|
96
97
|
| Geospatial | geo | `.geojson`, `.kml`, `.gpx`, `.shp` | download, print, HTML export, zoom(provider), search | lazy async |
|
|
97
|
-
| Drawing | drawing | `.excalidraw`, `.drawio`, `.dio` | download, print, HTML export, zoom(provider), search | lazy async |
|
|
98
|
+
| Drawing | drawing | `.excalidraw`, `.drawio`, `.dio`, `.mermaid`, `.mmd`, `.plantuml`, `.puml` | download, print, HTML export, zoom(provider), search | lazy async |
|
|
99
|
+
| Mind Map | mindmap | `.xmind` | download, print, HTML export, zoom(provider), search | lazy async |
|
|
98
100
|
| EPUB | ebook | `.epub` | download, HTML export, search(provider) | lazy async |
|
|
99
101
|
| UMD | ebook | `.umd` | download, print, HTML export, zoom(provider), search | lazy async |
|
|
100
102
|
| Image | image | `.gif`, `.jpg`, `.jpeg`, `.bmp`, `.tiff`, `.tif`, `.png`, `.svg`, `.webp`, `.avif`, `.ico`, `.heic`, `.heif`, `.jxl` | download, print, HTML export, zoom(provider) | lazy async |
|
|
101
103
|
| Markdown | markdown | `.md`, `.markdown` | download, print, HTML export, search | lazy async |
|
|
102
|
-
| Code and Text | code | `.txt`, `.json`, `.js`, `.mjs`, `.cjs`, `.css`, `.java`, `.py`, `.html`, `.htm`, `.jsx`, `.ts`, `.tsx`, `.xml`, `.log`, `.vue`, `.yaml`, `.yml`, `.ini`, `.sh`, `.bash`, `.sql`, `.go`, `.rs`, `.php`, `.c`, `.cpp`, `.cc`, `.h`, `.hpp`, `.cs`, `.diff`, `.jsonc`, `.json5`, `.ipynb`, `.toml`, `.proto`, `.hcl`, `.tex`, `.gv`, `.http`, `.react`, `.rb`, `.swift`, `.kt` | download, print, HTML export, search | lazy async |
|
|
104
|
+
| Code and Text | code | `.txt`, `.json`, `.js`, `.mjs`, `.cjs`, `.css`, `.java`, `.py`, `.html`, `.htm`, `.jsx`, `.ts`, `.tsx`, `.xml`, `.log`, `.vue`, `.yaml`, `.yml`, `.ini`, `.sh`, `.bash`, `.sql`, `.go`, `.rs`, `.php`, `.c`, `.cpp`, `.cc`, `.h`, `.hpp`, `.cs`, `.diff`, `.patch`, `.bundle`, `.bdl`, `.jsonc`, `.json5`, `.ipynb`, `.toml`, `.proto`, `.hcl`, `.tex`, `.gv`, `.http`, `.react`, `.rb`, `.swift`, `.kt` | download, print, HTML export, search | lazy async |
|
|
103
105
|
| Video | media | `.mp4`, `.webm`, `.m3u8` | download | lazy async |
|
|
104
106
|
| Audio | media | `.mp3`, `.mpeg`, `.wav`, `.ogg`, `.oga`, `.opus`, `.m4a`, `.aac`, `.flac`, `.weba`, `.midi`, `.mid` | download | lazy async |
|
|
105
107
|
| Data Asset | asset | `.ttf`, `.otf`, `.woff`, `.woff2`, `.psd`, `.ai`, `.eps`, `.sqlite`, `.wasm`, `.parquet`, `.avro`, `.webarchive` | download, HTML export, search | lazy async |
|
|
106
108
|
|
|
109
|
+
## Engineering-Grade On-Demand Renderer Assembly
|
|
110
|
+
|
|
111
|
+
One component, one line of code, fast integration; renderer assembly is what controls install size and first-screen bundle weight. Prefer a product-shaped preset first: `@file-viewer/preset-lite`, `@file-viewer/preset-office`, `@file-viewer/preset-engineering`, or `@file-viewer/preset-all`. Install individual renderer packages only when you need the smallest possible custom cut. The Vite plugin generates `virtual:file-viewer-renderers`, and application code passes the same shared `options` everywhere.
|
|
112
|
+
|
|
113
|
+
```bash
|
|
114
|
+
npm i @file-viewer/vue3 @file-viewer/core @file-viewer/vite-plugin @file-viewer/preset-office
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
```ts
|
|
118
|
+
import { fileViewerRenderers } from '@file-viewer/vite-plugin'
|
|
119
|
+
|
|
120
|
+
export default {
|
|
121
|
+
plugins: [
|
|
122
|
+
fileViewerRenderers({
|
|
123
|
+
preset: 'office',
|
|
124
|
+
scan: true,
|
|
125
|
+
copyAssets: true
|
|
126
|
+
})
|
|
127
|
+
]
|
|
128
|
+
}
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
```ts
|
|
132
|
+
import { configuredFileViewerRenderers } from 'virtual:file-viewer-renderers'
|
|
133
|
+
|
|
134
|
+
const options = {
|
|
135
|
+
builtinRenderers: 'none',
|
|
136
|
+
renderers: configuredFileViewerRenderers,
|
|
137
|
+
rendererMode: 'replace'
|
|
138
|
+
}
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
- Vue, React, Svelte, jQuery, and Vanilla JavaScript / Pure Web all receive the same `options`; each package maps them to native props, hooks, actions, plugins, or `mountViewer(...)` parameters.
|
|
142
|
+
- `preset-lite` covers text, Markdown, code, images, audio, and video; `preset-office` covers PDF / Word / Excel / PowerPoint / OFD; `preset-engineering` covers CAD / 3D / drawing / XMind / Geo / Typst / EDA / Data.
|
|
143
|
+
- For the smallest custom bundle, skip presets, install individual renderers such as `@file-viewer/renderer-pdf` or `@file-viewer/renderer-word`, and let `formats` generate exact imports.
|
|
144
|
+
- `scan:true` detects `fileViewerFormats`, `data-file-viewer-formats`, and upload `accept` hints so development and production builds select matching renderers automatically.
|
|
145
|
+
- `copyAssets:true` copies PDF/CAD/Typst/Archive/Data workers, WASM, and vendor assets for offline and enterprise intranet deployment.
|
|
146
|
+
- If you want the complete official demo capability matrix, install `@file-viewer/preset-all` and pass `allRenderers` to `renderers`; this is ideal for demos and internal admin tools, but should not be every product default.
|
|
147
|
+
|
|
107
148
|
## Shared Options And Events
|
|
108
149
|
|
|
109
150
|
Every ecosystem package uses the same `ViewerMountOptions` and `FileViewerOptions` semantics, mapped to framework-native props, events, refs, actions, or plugin APIs.
|
|
@@ -117,20 +158,20 @@ Every ecosystem package uses the same `ViewerMountOptions` and `FileViewerOption
|
|
|
117
158
|
| `type` | Explicit extension or MIME hint that overrides automatic detection. |
|
|
118
159
|
| `size` | File size hint used in lifecycle context, loading states, and safety limits. |
|
|
119
160
|
| `options` | The shared `FileViewerOptions` surface. Every component package keeps the same semantics. |
|
|
120
|
-
| `onEvent` / `onStateChange` | Unified event and state subscriptions for imperative wrappers such as Pure Web, React, and Svelte. Vue maps the same events to native emits. |
|
|
161
|
+
| `onEvent` / `onStateChange` | Unified event and state subscriptions for imperative wrappers such as Vanilla JavaScript / Pure Web, React, and Svelte. Vue maps the same events to native emits. |
|
|
121
162
|
|
|
122
163
|
## Actual Component Props
|
|
123
164
|
|
|
124
|
-
The table below lists the real props, event channel, and customization entry for every standard package. If you need imperative mount fields such as `buffer`, `name`, `type`, or `size`, prefer
|
|
165
|
+
The table below lists the real props, event channel, and customization entry for every standard package. If you need imperative mount fields such as `buffer`, `name`, `type`, or `size`, prefer Vanilla JavaScript / Pure Web, React, Svelte, jQuery, or Vue 2. The Vue 3 declarative component intentionally keeps the compact `url` / `file` / `options` entry; wrap raw binary input as a named `File` when extension detection matters.
|
|
125
166
|
|
|
126
167
|
| Component | Actual props / entry | Event channel | Customization entry |
|
|
127
168
|
| --- | --- | --- | --- |
|
|
169
|
+
| Vanilla JS / Pure Web `@file-viewer/web` | `<flyfish-file-viewer>` attributes: `src/url`, `filename/name`, `type`, `size`, `theme`, `toolbar`, `toolbar-position`, `watermark`, `search`, `options`; also supports `mountViewer(...)` | `viewer-ready`, `viewer-event`, `viewer-state-change`, `viewer-error`, `onEvent`, `onStateChange`, `controller.subscribe()` | The Custom Element instance exposes the full controller handle; the IIFE script auto-registers it while keeping imperative `mountViewer` and the asset copy CLI. |
|
|
128
170
|
| Vue 3 `@file-viewer/vue3` | `url`, `file`, `options` | `load-start`, `load-complete`, `unload-start`, `unload-complete`, `operation-before`, `operation-cancel`, `operation-availability-change`, `search-change`, `location-change`, `zoom-change` | Template refs expose `FileViewerExpose`. For `Blob` / `ArrayBuffer`, prefer wrapping it as a named `File` so extension detection stays deterministic. |
|
|
129
171
|
| Vue 2.7 `@file-viewer/vue2.7` | `url`, `file`, `buffer`, `name`, `filename`, `type`, `size`, `options`, `containerClass`, `containerStyle` | `viewer-event` / `viewerEvent` | The component instance exposes the full controller handle. This is the Vue 2.7 line behind the historical `@flyfish-group/file-viewer` package. |
|
|
130
172
|
| Vue 2.6 `@file-viewer/vue2.6` | Same as Vue 2.7 | `viewer-event` / `viewerEvent` | Separate Vue 2.6 build for long-lived applications that cannot move to Vue 2.7. |
|
|
131
173
|
| React `@file-viewer/react` | `ViewerMountOptions` plus native `div` props such as `className`, `style`, `data-*`, and `aria-*` | `onEvent`, `onStateChange` | `ref` exposes `FileViewerHandle`; `useFileViewer()` returns `ref`, `props`, `state`, and `handle` for custom toolbars. |
|
|
132
174
|
| React Legacy `@file-viewer/react-legacy` | Same as the React package | `onEvent`, `onStateChange` | Targets React 16.8 / 17 with a legacy-friendly component export. |
|
|
133
|
-
| Pure Web `@file-viewer/web` | `mountViewer(container, ViewerMountOptions, ViewerCoreOptions?)` | `onEvent`, `onStateChange`, `controller.subscribe()` | Returns `ViewerController`; also ships ESM, script-tag IIFE, and the `file-viewer-copy-assets` CLI. |
|
|
134
175
|
| jQuery `@file-viewer/jquery` | `$(el).fileViewer(ViewerMountOptions & { replace?: boolean })` | `onEvent`, `onStateChange`, or `getFileViewerController(el).subscribe()` | Plugin methods include `zoomIn`, `printRenderedHtml`, and `searchDocument`; `replace:false` updates the same node in place. |
|
|
135
176
|
| Svelte `@file-viewer/svelte` | `ViewerMountOptions` plus `className` and `containerStyle` | `on:viewerEvent`, `onEvent`, `onStateChange` | `bind:this` exposes the controller handle; the `use:fileViewer` action is also available and adds `replace`. |
|
|
136
177
|
|
|
@@ -143,7 +184,7 @@ The table below lists the real props, event channel, and customization entry for
|
|
|
143
184
|
| `ai` | Text collection, chunk size, and max text length for provenance, location, vectorization, and external AI workflows. |
|
|
144
185
|
| `archive` | Archive Worker/WASM URLs, timeout, cache, archive limits, and nested entry preview limits. |
|
|
145
186
|
| `pdf` | PDF.js worker, navigation pane, outline, thumbnails, rotation, streaming, range chunk size, and credentials. |
|
|
146
|
-
| `docx` / `spreadsheet` | DOCX uses the self-maintained @file-viewer/docx engine with Worker parsing, continuous flow reading, and async rendering by default; visual pagination is opt-in. Spreadsheet
|
|
187
|
+
| `docx` / `spreadsheet` | DOCX is provided by @file-viewer/renderer-word and uses the self-maintained @file-viewer/docx engine with Worker parsing, continuous flow reading, and async rendering by default; visual pagination is opt-in. Spreadsheet is provided by @file-viewer/renderer-spreadsheet with fidelity-first main-thread parsing, opt-in Worker loading, and opt-in header drag column resizing. |
|
|
147
188
|
| `typst` / `data` / `cad` | Typst, SQLite, CAD/DWG/DXF/DWF WASM, worker, encoding, and rendering strategy options. |
|
|
148
189
|
| `hooks` / `beforeOperation` | Shared lifecycle hooks and operation preflight checks for audit, permission, telemetry, and safety controls. |
|
|
149
190
|
|
|
@@ -162,10 +203,10 @@ For fully custom toolbars, hide the built-in toolbar and call the standard ref /
|
|
|
162
203
|
|
|
163
204
|
| Ecosystem | Recommended pattern |
|
|
164
205
|
| --- | --- |
|
|
206
|
+
| Vanilla JS / Pure Web | Use `<flyfish-file-viewer toolbar="false">` or `mountViewer(container, { options:{ toolbar:false }, onStateChange })`; custom DOM buttons can call `zoomIn()`, `printRenderedHtml()`, `searchDocument()`, and other element / controller methods directly. Use `viewer-state-change` or `controller.subscribe()` for advanced state sync. |
|
|
165
207
|
| Vue 3 | Pass `:options="{ toolbar: false }"`, call `downloadOriginalFile()`, `printRenderedHtml()`, `exportRenderedHtml()`, `zoomIn()`, `zoomOut()`, and `resetZoom()` through the template ref, and sync buttons with `@operation-availability-change` plus `@zoom-change`. |
|
|
166
208
|
| Vue 2.7 / 2.6 | Use `toolbar:false`, call instance methods through `$refs.viewer`, and listen to `@viewer-event` for `operation-availability-change` or `zoom-change`. |
|
|
167
209
|
| React / React Legacy | Prefer `useFileViewer({ options:{ toolbar:false } })`; pass `viewer.props` to the component, bind custom buttons to `viewer.handle`, and read `viewer.state.availability` / `viewer.state.zoom`. |
|
|
168
|
-
| Pure Web | Use `mountViewer(container, { options:{ toolbar:false }, onStateChange })`; custom DOM buttons call controller methods, and `controller.subscribe()` covers more advanced state sync. |
|
|
169
210
|
| jQuery | Use `$("#viewer").fileViewer({ options:{ toolbar:false } })`; buttons can call `$("#viewer").fileViewer("zoomIn")` or read capability state through `getFileViewerController($("#viewer")).subscribe()`. |
|
|
170
211
|
| Svelte | Use `<FileViewer bind:this={viewer} options={{ toolbar:false }} />`; buttons call `viewer.zoomIn()` / `viewer.printRenderedHtml()`, with `on:viewerEvent` or `onStateChange` for state sync. |
|
|
171
212
|
|
|
@@ -201,7 +242,7 @@ For fully custom toolbars, hide the built-in toolbar and call the standard ref /
|
|
|
201
242
|
| --- | --- |
|
|
202
243
|
| Shared viewer assets | The Pure Web package ships `file-viewer-copy-assets` to copy workers, WASM, vendor files, and examples into your static directory. |
|
|
203
244
|
| CAD / DWG / DXF / DWF | Configure `options.cad.wasmPath`, `workerUrl`, `dwfWasmUrl`, and `dxfEncoding` for self-hosted or intranet deployment. |
|
|
204
|
-
| PDF / DOCX / Excel | Configure `options.pdf.workerUrl`, `options.pdf.cMapUrl`, `options.pdf.wasmUrl`, `options.pdf.standardFontDataUrl`, `options.docx.workerUrl`, `options.docx.workerJsZipUrl`, and `options.spreadsheet.workerUrl`; DOCX Worker parsing is enabled by default
|
|
245
|
+
| PDF / DOCX / Excel | Configure `options.pdf.workerUrl`, `options.pdf.cMapUrl`, `options.pdf.wasmUrl`, `options.pdf.standardFontDataUrl`, `options.docx.workerUrl`, `options.docx.workerJsZipUrl`, and `options.spreadsheet.workerUrl`; DOCX Worker parsing is enabled by default, Excel Worker remains explicit opt-in, and header drag column resizing is controlled by `options.spreadsheet.resizableColumns`. |
|
|
205
246
|
| Typst / SQLite / Archive | Configure Typst compiler/renderer WASM, `data.sqlWasmUrl`, and `archive.workerUrl` / `archive.wasmUrl` as needed; Typst renders through local WASM only and never falls back to a public CDN. |
|
|
206
247
|
| Drawing | Draw.io uses the official diagrams.net offline viewer shipped with viewer assets by default; override `options.drawing.viewerScriptUrl` for custom paths, or set `preferOfficial:false` for the built-in SVG fallback. |
|
|
207
248
|
| Offline deployment | Runtime preview code does not depend on public CDN or third-party online assets; `file-viewer-copy-assets` copies PDF, CAD, Typst, SQLite, archive, Draw.io, DOCX worker/JSZip, and Office worker/vendor assets. |
|
package/README.md
CHANGED
|
@@ -52,7 +52,8 @@ viewer.destroy()
|
|
|
52
52
|
|
|
53
53
|
## 能力范围
|
|
54
54
|
|
|
55
|
-
`@file-viewer/vue2.7`
|
|
55
|
+
`@file-viewer/vue2.7` 与其他标准组件包共享同一套 core 接口和 renderer/preset 装配模型;完整能力可通过按需 renderer 或 `@file-viewer/preset-all` 覆盖 PDF、Word、Excel、PPT、OFD、CAD/DWG/DXF/DWF、EPUB/UMD、压缩包、邮件、Markdown、代码高亮、图片、音频、视频、3D 模型、地理数据和结构化数据资产等预览链路。完整格式矩阵和参数说明见官方文档: https://doc.file-viewer.app/guide/formats
|
|
56
|
+
|
|
56
57
|
|
|
57
58
|
完整格式矩阵、参数、生命周期 hooks、beforeOperation、主题、水印、搜索、缩放、打印和导出能力请查看官方文档: https://doc.file-viewer.app/
|
|
58
59
|
|
|
@@ -61,22 +62,22 @@ English README: [README.en.md](./README.en.md)。
|
|
|
61
62
|
<!-- FILE_VIEWER_GENERATED:START -->
|
|
62
63
|
## 生态包矩阵
|
|
63
64
|
|
|
64
|
-
所有标准组件包都只共享 `@file-viewer/core` 这个总底座,不依赖其他框架组件实现。core
|
|
65
|
+
所有标准组件包都只共享 `@file-viewer/core` 这个总底座,不依赖其他框架组件实现。core 负责格式矩阵、资源解析、renderer 协议、事件、操作 API、搜索、缩放、打印和导出;PDF、Word、PPTX、CAD、Typst 等重型链路通过独立 renderer 或 preset 显式装配;各框架组件包自己维护本地 controller、组件生命周期、类型出口和生态交互。
|
|
65
66
|
|
|
66
67
|
| 框架 | 标准 npm 包 | 入口格式 | GitHub | Gitee | 兼容历史包 |
|
|
67
68
|
| --- | --- | --- | --- | --- | --- |
|
|
69
|
+
| Vanilla JS / Pure Web | `@file-viewer/web` | ESM, 类型声明, script 标签 IIFE, Worker/WASM viewer 资源, 复制静态资源 CLI | [file-viewer-web](https://github.com/flyfish-dev/file-viewer-web) | [file-viewer-web](https://gitee.com/flyfish-dev/file-viewer-web) | `@flyfish-group/file-viewer-web` |
|
|
68
70
|
| Vue 3 | `@file-viewer/vue3` | ESM, 类型声明 | [file-viewer-vue3](https://github.com/flyfish-dev/file-viewer-vue3) | [file-viewer-vue3](https://gitee.com/flyfish-dev/file-viewer-vue3) | `@flyfish-group/file-viewer3`, `file-viewer3` |
|
|
69
71
|
| Vue 2.7 | `@file-viewer/vue2.7` | ESM, 类型声明 | [file-viewer-vue2.7](https://github.com/flyfish-dev/file-viewer-vue2.7) | [file-viewer-vue2.7](https://gitee.com/flyfish-dev/file-viewer-vue2.7) | `@flyfish-group/file-viewer` |
|
|
70
72
|
| Vue 2.6 | `@file-viewer/vue2.6` | ESM, 类型声明 | [file-viewer-vue2.6](https://github.com/flyfish-dev/file-viewer-vue2.6) | [file-viewer-vue2.6](https://gitee.com/flyfish-dev/file-viewer-vue2.6) | 无 |
|
|
71
73
|
| React 18/19 | `@file-viewer/react` | ESM, 类型声明 | [file-viewer-react](https://github.com/flyfish-dev/file-viewer-react) | [file-viewer-react](https://gitee.com/flyfish-dev/file-viewer-react) | `@flyfish-group/file-viewer-react` |
|
|
72
74
|
| React 16.8/17 | `@file-viewer/react-legacy` | ESM, 类型声明 | [file-viewer-react-legacy](https://github.com/flyfish-dev/file-viewer-react-legacy) | [file-viewer-react-legacy](https://gitee.com/flyfish-dev/file-viewer-react-legacy) | 无 |
|
|
73
|
-
| Pure Web | `@file-viewer/web` | ESM, 类型声明, script 标签 IIFE, Worker/WASM viewer 资源, 复制静态资源 CLI | [file-viewer-web](https://github.com/flyfish-dev/file-viewer-web) | [file-viewer-web](https://gitee.com/flyfish-dev/file-viewer-web) | `@flyfish-group/file-viewer-web` |
|
|
74
75
|
| jQuery | `@file-viewer/jquery` | ESM, 类型声明 | [file-viewer-jquery](https://github.com/flyfish-dev/file-viewer-jquery) | [file-viewer-jquery](https://gitee.com/flyfish-dev/file-viewer-jquery) | 无 |
|
|
75
76
|
| Svelte | `@file-viewer/svelte` | Svelte 组件, ESM, 类型声明 | [file-viewer-svelte](https://github.com/flyfish-dev/file-viewer-svelte) | [file-viewer-svelte](https://gitee.com/flyfish-dev/file-viewer-svelte) | 无 |
|
|
76
77
|
|
|
77
78
|
## 格式支持矩阵
|
|
78
79
|
|
|
79
|
-
|
|
80
|
+
共享格式矩阵当前覆盖 24 条预览链路、206 个扩展名。完整能力通过 renderer / preset 按需装配,组件层只做生态适配,不互相嵌套。
|
|
80
81
|
|
|
81
82
|
| 预览链路 | 分类 | 扩展名 | 能力 | 加载 |
|
|
82
83
|
| --- | --- | --- | --- | --- |
|
|
@@ -90,20 +91,60 @@ English README: [README.en.md](./README.en.md)。
|
|
|
90
91
|
| Typst | document | `.typ`, `.typst` | 下载, 打印(适配器), HTML(适配器), 缩放(Provider), 搜索 | 按需异步 |
|
|
91
92
|
| Archive | archive | `.zip`, `.zipx`, `.7z`, `.rar`, `.tar`, `.gz`, `.gzip`, `.tgz`, `.bz2`, `.bzip2`, `.tbz`, `.tbz2`, `.xz`, `.txz`, `.lzma`, `.zst`, `.tzst`, `.cab`, `.ar`, `.cpio`, `.iso`, `.xar`, `.lha`, `.lzh`, `.jar`, `.war`, `.ear`, `.apk`, `.cbz`, `.cbr` | 下载, 搜索 | 按需异步 |
|
|
92
93
|
| Email | email | `.eml`, `.msg`, `.mbox` | 下载, HTML, 搜索 | 按需异步 |
|
|
93
|
-
| EDA | eda | `.olb`, `.dra` | 下载, 打印, HTML, 搜索 | 按需异步 |
|
|
94
|
+
| EDA | eda | `.olb`, `.dra`, `.gds`, `.oas`, `.oasis` | 下载, 打印, HTML, 搜索 | 按需异步 |
|
|
94
95
|
| CAD | cad | `.dxf`, `.dwg`, `.dwf`, `.dwfx`, `.xps` | 下载, 打印, HTML, 缩放(Provider) | 按需异步 |
|
|
95
|
-
| 3D Model | model | `.glb`, `.gltf`, `.obj`, `.stl`, `.ply`, `.fbx`, `.dae`, `.3ds`, `.3mf`, `.amf`, `.usd`, `.usda`, `.usdc`, `.usdz`, `.kmz`, `.step`, `.stp`, `.iges`, `.igs`, `.ifc`, `.3dm`, `.pcd`, `.wrl`, `.vrml`, `.xyz`, `.vtk`, `.vtp` | 下载, 缩放(Provider) | 按需异步 |
|
|
96
|
+
| 3D Model | model | `.glb`, `.gltf`, `.obj`, `.stl`, `.ply`, `.fbx`, `.dae`, `.3ds`, `.3mf`, `.amf`, `.usd`, `.usda`, `.usdc`, `.usdz`, `.kmz`, `.step`, `.stp`, `.iges`, `.igs`, `.ifc`, `.3dm`, `.brep`, `.pcd`, `.wrl`, `.vrml`, `.xyz`, `.vtk`, `.vtp` | 下载, 缩放(Provider) | 按需异步 |
|
|
96
97
|
| Geospatial | geo | `.geojson`, `.kml`, `.gpx`, `.shp` | 下载, 打印, HTML, 缩放(Provider), 搜索 | 按需异步 |
|
|
97
|
-
| Drawing | drawing | `.excalidraw`, `.drawio`, `.dio` | 下载, 打印, HTML, 缩放(Provider), 搜索 | 按需异步 |
|
|
98
|
+
| Drawing | drawing | `.excalidraw`, `.drawio`, `.dio`, `.mermaid`, `.mmd`, `.plantuml`, `.puml` | 下载, 打印, HTML, 缩放(Provider), 搜索 | 按需异步 |
|
|
99
|
+
| Mind Map | mindmap | `.xmind` | 下载, 打印, HTML, 缩放(Provider), 搜索 | 按需异步 |
|
|
98
100
|
| EPUB | ebook | `.epub` | 下载, HTML, 搜索(Provider) | 按需异步 |
|
|
99
101
|
| UMD | ebook | `.umd` | 下载, 打印, HTML, 缩放(Provider), 搜索 | 按需异步 |
|
|
100
102
|
| Image | image | `.gif`, `.jpg`, `.jpeg`, `.bmp`, `.tiff`, `.tif`, `.png`, `.svg`, `.webp`, `.avif`, `.ico`, `.heic`, `.heif`, `.jxl` | 下载, 打印, HTML, 缩放(Provider) | 按需异步 |
|
|
101
103
|
| Markdown | markdown | `.md`, `.markdown` | 下载, 打印, HTML, 搜索 | 按需异步 |
|
|
102
|
-
| Code and Text | code | `.txt`, `.json`, `.js`, `.mjs`, `.cjs`, `.css`, `.java`, `.py`, `.html`, `.htm`, `.jsx`, `.ts`, `.tsx`, `.xml`, `.log`, `.vue`, `.yaml`, `.yml`, `.ini`, `.sh`, `.bash`, `.sql`, `.go`, `.rs`, `.php`, `.c`, `.cpp`, `.cc`, `.h`, `.hpp`, `.cs`, `.diff`, `.jsonc`, `.json5`, `.ipynb`, `.toml`, `.proto`, `.hcl`, `.tex`, `.gv`, `.http`, `.react`, `.rb`, `.swift`, `.kt` | 下载, 打印, HTML, 搜索 | 按需异步 |
|
|
104
|
+
| Code and Text | code | `.txt`, `.json`, `.js`, `.mjs`, `.cjs`, `.css`, `.java`, `.py`, `.html`, `.htm`, `.jsx`, `.ts`, `.tsx`, `.xml`, `.log`, `.vue`, `.yaml`, `.yml`, `.ini`, `.sh`, `.bash`, `.sql`, `.go`, `.rs`, `.php`, `.c`, `.cpp`, `.cc`, `.h`, `.hpp`, `.cs`, `.diff`, `.patch`, `.bundle`, `.bdl`, `.jsonc`, `.json5`, `.ipynb`, `.toml`, `.proto`, `.hcl`, `.tex`, `.gv`, `.http`, `.react`, `.rb`, `.swift`, `.kt` | 下载, 打印, HTML, 搜索 | 按需异步 |
|
|
103
105
|
| Video | media | `.mp4`, `.webm`, `.m3u8` | 下载 | 按需异步 |
|
|
104
106
|
| Audio | media | `.mp3`, `.mpeg`, `.wav`, `.ogg`, `.oga`, `.opus`, `.m4a`, `.aac`, `.flac`, `.weba`, `.midi`, `.mid` | 下载 | 按需异步 |
|
|
105
107
|
| Data Asset | asset | `.ttf`, `.otf`, `.woff`, `.woff2`, `.psd`, `.ai`, `.eps`, `.sqlite`, `.wasm`, `.parquet`, `.avro`, `.webarchive` | 下载, HTML, 搜索 | 按需异步 |
|
|
106
108
|
|
|
109
|
+
## 工程级按需 renderer 装配
|
|
110
|
+
|
|
111
|
+
一个组件,一行代码,快速集成;真正影响安装体积和首屏包体的是 renderer 装配。推荐优先按产品形态选择 `@file-viewer/preset-lite`、`@file-viewer/preset-office`、`@file-viewer/preset-engineering` 或 `@file-viewer/preset-all`,需要极致裁剪时再安装单个 renderer 包。Vite 插件负责生成 `virtual:file-viewer-renderers`,业务代码只传同一套 `options`。
|
|
112
|
+
|
|
113
|
+
```bash
|
|
114
|
+
npm i @file-viewer/vue3 @file-viewer/core @file-viewer/vite-plugin @file-viewer/preset-office
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
```ts
|
|
118
|
+
import { fileViewerRenderers } from '@file-viewer/vite-plugin'
|
|
119
|
+
|
|
120
|
+
export default {
|
|
121
|
+
plugins: [
|
|
122
|
+
fileViewerRenderers({
|
|
123
|
+
preset: 'office',
|
|
124
|
+
scan: true,
|
|
125
|
+
copyAssets: true
|
|
126
|
+
})
|
|
127
|
+
]
|
|
128
|
+
}
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
```ts
|
|
132
|
+
import { configuredFileViewerRenderers } from 'virtual:file-viewer-renderers'
|
|
133
|
+
|
|
134
|
+
const options = {
|
|
135
|
+
builtinRenderers: 'none',
|
|
136
|
+
renderers: configuredFileViewerRenderers,
|
|
137
|
+
rendererMode: 'replace'
|
|
138
|
+
}
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
- Vue、React、Svelte、jQuery、Vanilla JS / Pure Web 都传同一份 `options`,只是在各自生态中映射为 props、hook、action、plugin 或 `mountViewer(...)` 参数。
|
|
142
|
+
- `preset-lite` 面向文本、Markdown、代码、图片和音视频;`preset-office` 面向 PDF / Word / Excel / PowerPoint / OFD;`preset-engineering` 面向 CAD / 3D / 绘图 / XMind / Geo / Typst / EDA / Data。
|
|
143
|
+
- 想要最小包体时,可以不用 preset,直接安装 `@file-viewer/renderer-pdf`、`@file-viewer/renderer-word` 等单个 renderer,并用 `formats` 精确生成 import。
|
|
144
|
+
- `scan:true` 会识别 `fileViewerFormats`、`data-file-viewer-formats` 和上传控件 `accept`,调试与打包时自动选择 renderer。
|
|
145
|
+
- `copyAssets:true` 会复制 PDF/CAD/Typst/Archive/Data 等 worker、WASM 和 vendor 资源,满足离线和企业内网部署。
|
|
146
|
+
- 想一次性拥有官方 Demo 的完整能力时,可以安装 `@file-viewer/preset-all` 并把 `allRenderers` 传给 `renderers`;这适合 demo 和后台运维工具,不建议作为所有业务默认入口。
|
|
147
|
+
|
|
107
148
|
## 统一参数与事件
|
|
108
149
|
|
|
109
150
|
所有生态组件都围绕同一套 `ViewerMountOptions` 与 `FileViewerOptions` 工作,只是映射到各自框架的 props、事件、ref、action 或插件 API。
|
|
@@ -117,20 +158,20 @@ English README: [README.en.md](./README.en.md)。
|
|
|
117
158
|
| `type` | 显式指定扩展名或 MIME 线索,覆盖自动识别结果。 |
|
|
118
159
|
| `size` | 文件大小提示,用于生命周期上下文、加载状态和安全限制展示。 |
|
|
119
160
|
| `options` | 完整 `FileViewerOptions`,所有框架包保持同一套参数语义。 |
|
|
120
|
-
| `onEvent` / `onStateChange` | Pure Web、React、Svelte 等命令式包装层的统一事件和状态订阅;Vue 组件会映射为原生 emit。 |
|
|
161
|
+
| `onEvent` / `onStateChange` | Vanilla JS / Pure Web、React、Svelte 等命令式包装层的统一事件和状态订阅;Vue 组件会映射为原生 emit。 |
|
|
121
162
|
|
|
122
163
|
## 实际组件属性
|
|
123
164
|
|
|
124
|
-
下面列的是每个标准组件包当前真实暴露的属性、事件和控制入口。需要 `buffer`、`name`、`type`、`size` 这类命令式挂载参数时,优先选择
|
|
165
|
+
下面列的是每个标准组件包当前真实暴露的属性、事件和控制入口。需要 `buffer`、`name`、`type`、`size` 这类命令式挂载参数时,优先选择 Vanilla JS / Pure Web、React、Svelte、jQuery 或 Vue2 组件;Vue3 声明式组件保持 `url` / `file` / `options` 的简洁入口,复杂二进制来源请包装成带文件名的 `File`。
|
|
125
166
|
|
|
126
167
|
| 组件 | 实际属性 / 入口 | 事件入口 | 定制入口 |
|
|
127
168
|
| --- | --- | --- | --- |
|
|
169
|
+
| Vanilla JS / Pure Web `@file-viewer/web` | `<flyfish-file-viewer>` 属性 `src/url`、`filename/name`、`type`、`size`、`theme`、`toolbar`、`toolbar-position`、`watermark`、`search`、`options`;也支持 `mountViewer(...)` | `viewer-ready`、`viewer-event`、`viewer-state-change`、`viewer-error`、`onEvent`、`onStateChange`、`controller.subscribe()` | Custom Element 实例暴露完整 controller handle;IIFE script 标签会自动注册元素,同时保留 `mountViewer` 命令式挂载和资源复制 CLI。 |
|
|
128
170
|
| Vue 3 `@file-viewer/vue3` | `url`、`file`、`options` | `load-start`、`load-complete`、`unload-start`、`unload-complete`、`operation-before`、`operation-cancel`、`operation-availability-change`、`search-change`、`location-change`、`zoom-change` | 模板 `ref` 暴露 `FileViewerExpose`;适合声明式接入。`Blob` / `ArrayBuffer` 建议包装成带扩展名的 `File` 后传给 `file`。 |
|
|
129
171
|
| Vue 2.7 `@file-viewer/vue2.7` | `url`、`file`、`buffer`、`name`、`filename`、`type`、`size`、`options`、`containerClass`、`containerStyle` | `viewer-event` / `viewerEvent` | 组件实例暴露 controller handle 全量方法;适合 Vue 2.7 项目和历史 `@flyfish-group/file-viewer` 平滑升级。 |
|
|
130
172
|
| Vue 2.6 `@file-viewer/vue2.6` | 同 Vue 2.7 | `viewer-event` / `viewerEvent` | 独立 Vue 2.6 构建,不要求业务升级到 Vue 2.7。 |
|
|
131
173
|
| React `@file-viewer/react` | `ViewerMountOptions` + `div` 原生属性,如 `className`、`style`、`data-*`、`aria-*` | `onEvent`、`onStateChange` | `ref` 暴露 `FileViewerHandle`;`useFileViewer()` 会返回 `ref`、`props`、`state`、`handle`,便于自定义工具栏。 |
|
|
132
174
|
| React Legacy `@file-viewer/react-legacy` | 同 React 标准包 | `onEvent`、`onStateChange` | 面向 React 16.8 / 17;组件名和默认导出保持 legacy 生态友好。 |
|
|
133
|
-
| Pure Web `@file-viewer/web` | `mountViewer(container, ViewerMountOptions, ViewerCoreOptions?)` | `onEvent`、`onStateChange`、`controller.subscribe()` | 返回 `ViewerController`;同时提供 ESM、IIFE script 标签包和 `file-viewer-copy-assets`。 |
|
|
134
175
|
| jQuery `@file-viewer/jquery` | `$(el).fileViewer(ViewerMountOptions & { replace?: boolean })` | `onEvent`、`onStateChange` 或 `getFileViewerController(el).subscribe()` | 插件方法支持 `zoomIn`、`printRenderedHtml`、`searchDocument` 等;`replace:false` 可在同一节点上原地更新。 |
|
|
135
176
|
| Svelte `@file-viewer/svelte` | `ViewerMountOptions` + `className`、`containerStyle` | `on:viewerEvent`、`onEvent`、`onStateChange` | `bind:this` 暴露 controller handle;也提供 `use:fileViewer` action,action 额外支持 `replace`。 |
|
|
136
177
|
|
|
@@ -143,7 +184,7 @@ English README: [README.en.md](./README.en.md)。
|
|
|
143
184
|
| `ai` | 控制文本结构采集、分块大小和最大文本长度,为溯源、定位、向量化和外部 AI 流程提供基础。 |
|
|
144
185
|
| `archive` | 配置压缩包 Worker/WASM、超时、缓存、包体限制和压缩包内单文件预览大小。 |
|
|
145
186
|
| `pdf` | 配置 PDF.js Worker、导航栏、目录、缩略图、旋转、流式读取、Range chunk 和凭据。 |
|
|
146
|
-
| `docx` / `spreadsheet` | DOCX
|
|
187
|
+
| `docx` / `spreadsheet` | DOCX 由 @file-viewer/renderer-word 承接并使用自研 @file-viewer/docx,默认 Worker 解析、连续流式阅读和异步分批渲染,可按需显式开启视觉分页;表格由 @file-viewer/renderer-spreadsheet 承接,默认保真主线程渲染,Worker 和表头拖拽调列宽均可按需显式开启。 |
|
|
147
188
|
| `typst` / `data` / `cad` | 配置 Typst、SQLite、CAD/DWG/DXF/DWF 等 WASM、Worker、编码和渲染策略。 |
|
|
148
189
|
| `hooks` / `beforeOperation` | 统一生命周期 hooks 和操作前置校验,可用于审计、权限、埋点和安全控制。 |
|
|
149
190
|
|
|
@@ -162,10 +203,10 @@ English README: [README.en.md](./README.en.md)。
|
|
|
162
203
|
|
|
163
204
|
| 生态 | 推荐方式 |
|
|
164
205
|
| --- | --- |
|
|
206
|
+
| Vanilla JS / Pure Web | `<flyfish-file-viewer toolbar="false">` 或 `mountViewer(container, { options:{ toolbar:false }, onStateChange })`;外部 DOM 按钮可直接调用元素实例 / controller 的 `zoomIn()`、`printRenderedHtml()`、`searchDocument()` 等方法,复杂场景用 `viewer-state-change` 或 `controller.subscribe()` 同步状态。 |
|
|
165
207
|
| Vue 3 | 传 `:options="{ toolbar: false }"` 隐藏内置工具栏,通过模板 `ref` 调用 `downloadOriginalFile()`、`printRenderedHtml()`、`exportRenderedHtml()`、`zoomIn()`、`zoomOut()`、`resetZoom()`;用 `@operation-availability-change` 和 `@zoom-change` 同步按钮显隐与比例。 |
|
|
166
208
|
| Vue 2.7 / 2.6 | 同样设置 `toolbar:false`,通过 `$refs.viewer` 调用实例方法;监听 `@viewer-event`,在 `event.type === "operation-availability-change"` 或 `event.type === "zoom-change"` 时更新外部工具栏。 |
|
|
167
209
|
| React / React Legacy | 推荐 `useFileViewer({ options:{ toolbar:false } })`,把 `viewer.props` 传给组件,把按钮绑定到 `viewer.handle`,并读取 `viewer.state.availability` / `viewer.state.zoom` 控制禁用状态。 |
|
|
168
|
-
| Pure Web | `const controller = mountViewer(container, { options:{ toolbar:false }, onStateChange })`;外部 DOM 按钮调用 controller 方法,复杂场景可用 `controller.subscribe()` 做状态同步。 |
|
|
169
210
|
| jQuery | `$("#viewer").fileViewer({ options:{ toolbar:false } })`;按钮调用 `$("#viewer").fileViewer("zoomIn")` 或通过 `getFileViewerController($("#viewer")).subscribe()` 获取能力状态。 |
|
|
170
211
|
| Svelte | `<FileViewer bind:this={viewer} options={{ toolbar:false }} />`;按钮直接调用 `viewer.zoomIn()`、`viewer.printRenderedHtml()`,并用 `on:viewerEvent` / `onStateChange` 同步状态。 |
|
|
171
212
|
|
|
@@ -201,7 +242,7 @@ English README: [README.en.md](./README.en.md)。
|
|
|
201
242
|
| --- | --- |
|
|
202
243
|
| 通用 viewer assets | Pure Web 包提供 `file-viewer-copy-assets`,可把 Worker、WASM、vendor 和示例资源复制到业务静态目录。 |
|
|
203
244
|
| CAD / DWG / DXF / DWF | 按需配置 `options.cad.wasmPath`、`workerUrl`、`dwfWasmUrl`、`dxfEncoding`,支持自托管和内网部署。 |
|
|
204
|
-
| PDF / DOCX / Excel | 按需配置 `options.pdf.workerUrl`、`options.pdf.cMapUrl`、`options.pdf.wasmUrl`、`options.pdf.standardFontDataUrl`、`options.docx.workerUrl`、`options.docx.workerJsZipUrl`、`options.spreadsheet.workerUrl`;DOCX 默认启用自研 Worker 解析,Excel Worker
|
|
245
|
+
| PDF / DOCX / Excel | 按需配置 `options.pdf.workerUrl`、`options.pdf.cMapUrl`、`options.pdf.wasmUrl`、`options.pdf.standardFontDataUrl`、`options.docx.workerUrl`、`options.docx.workerJsZipUrl`、`options.spreadsheet.workerUrl`;DOCX 默认启用自研 Worker 解析,Excel Worker 需显式开启,列宽拖拽可通过 `options.spreadsheet.resizableColumns` 显式开启。 |
|
|
205
246
|
| Typst / SQLite / Archive | 按需配置 Typst compiler/renderer WASM、`data.sqlWasmUrl`、`archive.workerUrl` / `archive.wasmUrl`;Typst 仅使用本地 WASM 真实渲染,不访问公共 CDN。 |
|
|
206
247
|
| Drawing | Draw.io 默认使用随 viewer assets 分发的官方 diagrams.net 离线 viewer;路径特殊时可通过 `options.drawing.viewerScriptUrl` 覆盖,`preferOfficial:false` 才切到内置 SVG 兜底。 |
|
|
207
248
|
| 离线部署 | 运行时不依赖公共 CDN 或第三方在线资源;`file-viewer-copy-assets` 会复制 PDF、CAD、Typst、SQLite、压缩包、Draw.io、DOCX worker/JSZip 和 Office worker/vendor 资产。 |
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@file-viewer/vue2.7",
|
|
3
|
-
"version": "2.0
|
|
3
|
+
"version": "2.1.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"type": "module",
|
|
6
6
|
"description": "Standard Vue 2.7 component package for Flyfish File Viewer",
|
|
@@ -10,7 +10,10 @@
|
|
|
10
10
|
"vue",
|
|
11
11
|
"vue2",
|
|
12
12
|
"vue2.7",
|
|
13
|
-
"office-preview"
|
|
13
|
+
"office-preview",
|
|
14
|
+
"document-viewer",
|
|
15
|
+
"file-preview",
|
|
16
|
+
"self-hosted"
|
|
14
17
|
],
|
|
15
18
|
"publishConfig": {
|
|
16
19
|
"access": "public",
|
|
@@ -29,6 +32,10 @@
|
|
|
29
32
|
"bugs": {
|
|
30
33
|
"url": "https://github.com/flyfish-dev/file-viewer-vue2.7/issues"
|
|
31
34
|
},
|
|
35
|
+
"funding": {
|
|
36
|
+
"type": "individual",
|
|
37
|
+
"url": "https://dev.flyfish.group/shop"
|
|
38
|
+
},
|
|
32
39
|
"main": "./dist/index.js",
|
|
33
40
|
"module": "./dist/index.js",
|
|
34
41
|
"types": "./dist/index.d.ts",
|
|
@@ -49,7 +56,7 @@
|
|
|
49
56
|
"vue": ">=2.7 <3"
|
|
50
57
|
},
|
|
51
58
|
"dependencies": {
|
|
52
|
-
"@file-viewer/core": "^2.0
|
|
59
|
+
"@file-viewer/core": "^2.1.0"
|
|
53
60
|
},
|
|
54
61
|
"devDependencies": {
|
|
55
62
|
"typescript": "^6.0.3",
|