@flyfish-group/file-viewer3 1.0.5 → 1.0.7
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/LICENSE +160 -0
- package/README.md +103 -19
- package/dist/components/CadViewer.js +1 -0
- package/dist/components/CodeViewer.js +1 -0
- package/dist/components/ImageViewer.js +1 -1950
- package/dist/components/MarkdownViewer.js +1 -1469
- package/dist/components/OfdViewer.js +1 -0
- package/dist/components/PdfView.js +1 -22630
- package/dist/components/PptxRender.js +1 -22428
- package/dist/components/XlsxTable.js +1 -55468
- package/dist/components/_plugin-vue_export-helper.js +1 -0
- package/dist/components/asyncToGenerator.js +1 -0
- package/dist/components/chunk.js +1 -0
- package/dist/components/dist.js +1 -0
- package/dist/components/docx-preview.js +1 -5795
- package/dist/components/jszip.min.js +1 -0
- package/dist/components/objectSpread2.js +1 -0
- package/dist/components/ofd.js +1 -0
- package/dist/components/use.js +1 -0
- package/dist/components/worker-ref.js +1 -21
- package/dist/components/wrapAsyncGenerator.js +1 -0
- package/dist/file-viewer3.css +2 -0
- package/dist/index.mjs +1 -6
- package/dist/index.umd.js +1 -313
- package/dist/src/components/utils.d.ts +3 -0
- package/dist/src/main.d.ts +0 -0
- package/dist/src/package/common/type.d.ts +41 -0
- package/dist/src/package/common/util.d.ts +5 -0
- package/dist/src/package/common/worker-ref.d.ts +12 -0
- package/dist/src/package/components/FileViewer/FileViewer.vue.d.ts +20 -0
- package/dist/src/package/components/FileViewer/index.d.ts +2 -0
- package/dist/src/package/components/FileViewer/util.d.ts +2 -0
- package/dist/src/package/index.d.ts +18 -3
- package/dist/src/package/use/index.d.ts +2 -0
- package/dist/src/package/use/loading.d.ts +33 -0
- package/dist/src/package/use/worker.d.ts +24 -0
- package/dist/src/package/vendors/cad/CadViewer.vue.d.ts +7 -0
- package/dist/src/package/vendors/cad/index.d.ts +7 -0
- package/dist/src/package/vendors/image/ImageViewer.vue.d.ts +6 -0
- package/dist/src/package/vendors/image/index.d.ts +4 -0
- package/dist/src/package/vendors/md/MarkdownViewer.vue.d.ts +6 -0
- package/dist/src/package/vendors/md/index.d.ts +4 -0
- package/dist/src/package/vendors/mp4/index.d.ts +4 -0
- package/dist/src/package/vendors/ofd/OfdViewer.vue.d.ts +6 -0
- package/dist/src/package/vendors/ofd/index.d.ts +7 -0
- package/dist/src/package/vendors/pdf/PdfView.vue.d.ts +6 -0
- package/dist/src/package/vendors/pdf/index.d.ts +1 -0
- package/dist/src/package/vendors/pdf/worker/index.d.ts +4 -0
- package/dist/src/package/vendors/pptx/PptxRender.vue.d.ts +9 -0
- package/dist/src/package/vendors/pptx/index.d.ts +6 -0
- package/dist/src/package/vendors/pptx/options.d.ts +39 -0
- package/dist/src/package/vendors/pptx/support/chart.d.ts +4 -0
- package/dist/src/package/vendors/pptx/worker/index.d.ts +4 -0
- package/dist/src/package/vendors/renders.d.ts +3 -0
- package/dist/src/package/vendors/text/CodeViewer.vue.d.ts +7 -0
- package/dist/src/package/vendors/text/index.d.ts +10 -0
- package/dist/src/package/vendors/word/doc.d.ts +5 -0
- package/dist/src/package/vendors/word/docx.d.ts +5 -0
- package/dist/src/package/vendors/word/index.d.ts +3 -0
- package/dist/src/package/vendors/xlsx/XlsxTable.state.d.ts +79 -0
- package/dist/src/package/vendors/xlsx/XlsxTable.view.d.ts +22 -0
- package/dist/src/package/vendors/xlsx/XlsxTable.vue.d.ts +6 -0
- package/dist/src/package/vendors/xlsx/index.d.ts +5 -0
- package/dist/src/package/vendors/xlsx/util.d.ts +8 -0
- package/dist/src/package/vendors/xlsx/worker/index.d.ts +4 -0
- package/dist/src/package/vendors/xlsx/worker/sheetjs/SheetJsModel.d.ts +69 -0
- package/dist/src/package/vendors/xlsx/worker/sheetjs/color.d.ts +2 -0
- package/dist/src/package/vendors/xlsx/worker/sheetjs/index.d.ts +4 -0
- package/dist/src/package/vendors/xlsx/worker/sheetjs/sheet.worker.d.ts +1 -0
- package/dist/worker/pdf.worker.js +1 -58
- package/dist/worker/pptx.worker.js +1 -21
- package/dist/worker/sheet.worker.js +1 -38
- package/package.json +50 -42
- package/dist/components/_commonjs-dynamic-modules.js +0 -6
- package/dist/components/_commonjsHelpers.js +0 -30
- package/dist/components/index.js +0 -4914
- package/dist/index.d.ts +0 -48
- package/dist/style.css +0 -57
- package/dist/worker/xlsx.worker.js +0 -62
package/LICENSE
ADDED
|
@@ -0,0 +1,160 @@
|
|
|
1
|
+
Apache License
|
|
2
|
+
Version 2.0, January 2004
|
|
3
|
+
http://www.apache.org/licenses/
|
|
4
|
+
|
|
5
|
+
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
|
|
6
|
+
|
|
7
|
+
1. Definitions.
|
|
8
|
+
|
|
9
|
+
"License" shall mean the terms and conditions for use, reproduction, and
|
|
10
|
+
distribution as defined by Sections 1 through 9 of this document.
|
|
11
|
+
|
|
12
|
+
"Licensor" shall mean the copyright owner or entity authorized by the copyright
|
|
13
|
+
owner that is granting the License.
|
|
14
|
+
|
|
15
|
+
"Legal Entity" shall mean the union of the acting entity and all other entities
|
|
16
|
+
that control, are controlled by, or are under common control with that entity.
|
|
17
|
+
For the purposes of this definition, "control" means (i) the power, direct or
|
|
18
|
+
indirect, to cause the direction or management of such entity, whether by
|
|
19
|
+
contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the
|
|
20
|
+
outstanding shares, or (iii) beneficial ownership of such entity.
|
|
21
|
+
|
|
22
|
+
"You" (or "Your") shall mean an individual or Legal Entity exercising
|
|
23
|
+
permissions granted by this License.
|
|
24
|
+
|
|
25
|
+
"Source" form shall mean the preferred form for making modifications, including
|
|
26
|
+
but not limited to software source code, documentation source, and configuration
|
|
27
|
+
files.
|
|
28
|
+
|
|
29
|
+
"Object" form shall mean any form resulting from mechanical transformation or
|
|
30
|
+
translation of a Source form, including but not limited to compiled object code,
|
|
31
|
+
generated documentation, and conversions to other media types.
|
|
32
|
+
|
|
33
|
+
"Work" shall mean the work of authorship, whether in Source or Object form,
|
|
34
|
+
made available under the License, as indicated by a copyright notice that is
|
|
35
|
+
included in or attached to the work.
|
|
36
|
+
|
|
37
|
+
"Derivative Works" shall mean any work, whether in Source or Object form, that
|
|
38
|
+
is based on (or derived from) the Work and for which the editorial revisions,
|
|
39
|
+
annotations, elaborations, or other modifications represent, as a whole, an
|
|
40
|
+
original work of authorship. For the purposes of this License, Derivative Works
|
|
41
|
+
shall not include works that remain separable from, or merely link (or bind by
|
|
42
|
+
name) to the interfaces of, the Work and Derivative Works thereof.
|
|
43
|
+
|
|
44
|
+
"Contribution" shall mean any work of authorship, including the original version
|
|
45
|
+
of the Work and any modifications or additions to that Work or Derivative Works
|
|
46
|
+
thereof, that is intentionally submitted to Licensor for inclusion in the Work by
|
|
47
|
+
the copyright owner or by an individual or Legal Entity authorized to submit on
|
|
48
|
+
behalf of the copyright owner. For the purposes of this definition, "submitted"
|
|
49
|
+
means any form of electronic, verbal, or written communication sent to the
|
|
50
|
+
Licensor or its representatives, including but not limited to communication on
|
|
51
|
+
electronic mailing lists, source code control systems, and issue tracking systems
|
|
52
|
+
that are managed by, or on behalf of, the Licensor for the purpose of discussing
|
|
53
|
+
and improving the Work, but excluding communication that is conspicuously marked
|
|
54
|
+
or otherwise designated in writing by the copyright owner as "Not a
|
|
55
|
+
Contribution."
|
|
56
|
+
|
|
57
|
+
"Contributor" shall mean Licensor and any individual or Legal Entity on behalf
|
|
58
|
+
of whom a Contribution has been received by Licensor and subsequently
|
|
59
|
+
incorporated within the Work.
|
|
60
|
+
|
|
61
|
+
2. Grant of Copyright License. Subject to the terms and conditions of this
|
|
62
|
+
License, each Contributor hereby grants to You a perpetual, worldwide,
|
|
63
|
+
non-exclusive, no-charge, royalty-free, irrevocable copyright license to
|
|
64
|
+
reproduce, prepare Derivative Works of, publicly display, publicly perform,
|
|
65
|
+
sublicense, and distribute the Work and such Derivative Works in Source or
|
|
66
|
+
Object form.
|
|
67
|
+
|
|
68
|
+
3. Grant of Patent License. Subject to the terms and conditions of this License,
|
|
69
|
+
each Contributor hereby grants to You a perpetual, worldwide, non-exclusive,
|
|
70
|
+
no-charge, royalty-free, irrevocable (except as stated in this section) patent
|
|
71
|
+
license to make, have made, use, offer to sell, sell, import, and otherwise
|
|
72
|
+
transfer the Work, where such license applies only to those patent claims
|
|
73
|
+
licensable by such Contributor that are necessarily infringed by their
|
|
74
|
+
Contribution(s) alone or by combination of their Contribution(s) with the Work to
|
|
75
|
+
which such Contribution(s) was submitted. If You institute patent litigation
|
|
76
|
+
against any entity (including a cross-claim or counterclaim in a lawsuit)
|
|
77
|
+
alleging that the Work or a Contribution incorporated within the Work
|
|
78
|
+
constitutes direct or contributory patent infringement, then any patent licenses
|
|
79
|
+
granted to You under this License for that Work shall terminate as of the date
|
|
80
|
+
such litigation is filed.
|
|
81
|
+
|
|
82
|
+
4. Redistribution. You may reproduce and distribute copies of the Work or
|
|
83
|
+
Derivative Works thereof in any medium, with or without modifications, and in
|
|
84
|
+
Source or Object form, provided that You meet the following conditions:
|
|
85
|
+
|
|
86
|
+
(a) You must give any other recipients of the Work or Derivative Works a copy of
|
|
87
|
+
this License; and
|
|
88
|
+
|
|
89
|
+
(b) You must cause any modified files to carry prominent notices stating that
|
|
90
|
+
You changed the files; and
|
|
91
|
+
|
|
92
|
+
(c) You must retain, in the Source form of any Derivative Works that You
|
|
93
|
+
distribute, all copyright, patent, trademark, and attribution notices from the
|
|
94
|
+
Source form of the Work, excluding those notices that do not pertain to any part
|
|
95
|
+
of the Derivative Works; and
|
|
96
|
+
|
|
97
|
+
(d) If the Work includes a "NOTICE" text file as part of its distribution, then
|
|
98
|
+
any Derivative Works that You distribute must include a readable copy of the
|
|
99
|
+
attribution notices contained within such NOTICE file, excluding those notices
|
|
100
|
+
that do not pertain to any part of the Derivative Works, in at least one of the
|
|
101
|
+
following places: within a NOTICE text file distributed as part of the Derivative
|
|
102
|
+
Works; within the Source form or documentation, if provided along with the
|
|
103
|
+
Derivative Works; or, within a display generated by the Derivative Works, if and
|
|
104
|
+
wherever such third-party notices normally appear. The contents of the NOTICE
|
|
105
|
+
file are for informational purposes only and do not modify the License. You may
|
|
106
|
+
add Your own attribution notices within Derivative Works that You distribute,
|
|
107
|
+
alongside or as an addendum to the NOTICE text from the Work, provided that such
|
|
108
|
+
additional attribution notices cannot be construed as modifying the License.
|
|
109
|
+
|
|
110
|
+
You may add Your own copyright statement to Your modifications and may provide
|
|
111
|
+
additional or different license terms and conditions for use, reproduction, or
|
|
112
|
+
distribution of Your modifications, or for any such Derivative Works as a whole,
|
|
113
|
+
provided Your use, reproduction, and distribution of the Work otherwise complies
|
|
114
|
+
with the conditions stated in this License.
|
|
115
|
+
|
|
116
|
+
5. Submission of Contributions. Unless You explicitly state otherwise, any
|
|
117
|
+
Contribution intentionally submitted for inclusion in the Work by You to the
|
|
118
|
+
Licensor shall be under the terms and conditions of this License, without any
|
|
119
|
+
additional terms or conditions. Notwithstanding the above, nothing herein shall
|
|
120
|
+
supersede or modify the terms of any separate license agreement you may have
|
|
121
|
+
executed with Licensor regarding such Contributions.
|
|
122
|
+
|
|
123
|
+
6. Trademarks. This License does not grant permission to use the trade names,
|
|
124
|
+
trademarks, service marks, or product names of the Licensor, except as required
|
|
125
|
+
for reasonable and customary use in describing the origin of the Work and
|
|
126
|
+
reproducing the content of the NOTICE file.
|
|
127
|
+
|
|
128
|
+
7. Disclaimer of Warranty. Unless required by applicable law or agreed to in
|
|
129
|
+
writing, Licensor provides the Work (and each Contributor provides its
|
|
130
|
+
Contributions) on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
|
131
|
+
KIND, either express or implied, including, without limitation, any warranties or
|
|
132
|
+
conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
|
|
133
|
+
PARTICULAR PURPOSE. You are solely responsible for determining the
|
|
134
|
+
appropriateness of using or redistributing the Work and assume any risks
|
|
135
|
+
associated with Your exercise of permissions under this License.
|
|
136
|
+
|
|
137
|
+
8. Limitation of Liability. In no event and under no legal theory, whether in
|
|
138
|
+
tort (including negligence), contract, or otherwise, unless required by
|
|
139
|
+
applicable law (such as deliberate and grossly negligent acts) or agreed to in
|
|
140
|
+
writing, shall any Contributor be liable to You for damages, including any
|
|
141
|
+
direct, indirect, special, incidental, or consequential damages of any character
|
|
142
|
+
arising as a result of this License or out of the use or inability to use the
|
|
143
|
+
Work (including but not limited to damages for loss of goodwill, work stoppage,
|
|
144
|
+
computer failure or malfunction, or any and all other commercial damages or
|
|
145
|
+
losses), even if such Contributor has been advised of the possibility of such
|
|
146
|
+
damages.
|
|
147
|
+
|
|
148
|
+
9. Accepting Warranty or Additional Liability. While redistributing the Work or
|
|
149
|
+
Derivative Works thereof, You may choose to offer, and charge a fee for,
|
|
150
|
+
acceptance of support, warranty, indemnity, or other liability obligations and/or
|
|
151
|
+
rights consistent with this License. However, in accepting such obligations, You
|
|
152
|
+
may act only on Your own behalf and on Your sole responsibility, not on behalf of
|
|
153
|
+
any other Contributor, and only if You agree to indemnify, defend, and hold each
|
|
154
|
+
Contributor harmless for any liability incurred by, or claims asserted against,
|
|
155
|
+
such Contributor by reason of your accepting any such warranty or additional
|
|
156
|
+
liability.
|
|
157
|
+
|
|
158
|
+
END OF TERMS AND CONDITIONS
|
|
159
|
+
|
|
160
|
+
Copyright 2026 Flyfish Viewer
|
package/README.md
CHANGED
|
@@ -2,45 +2,62 @@
|
|
|
2
2
|
|
|
3
3
|
把 Word、Excel、PPT、PDF 和图片稳稳带进浏览器里。
|
|
4
4
|
|
|
5
|
-
`@flyfish-group/file-viewer3` 是一款基于 Vue 3、TypeScript 和 Vite
|
|
5
|
+
`@flyfish-group/file-viewer3` 是一款基于 Vue 3、TypeScript 和 Vite 构建的纯前端文件预览组件。Vue2.7 项目请使用同能力包 `@flyfish-group/file-viewer`。两条 npm 包线保持一致的格式覆盖、示例体验和 API 语义,在线 Demo 始终使用 `v3` 分支产物作为最新体验基准。
|
|
6
|
+
|
|
7
|
+
它不依赖后端转码服务,适合接入 OA、知识库、附件中心、流程系统和需要离线能力的业务场景。这个项目的目标很直接: 让文档预览不再像临时拼出来的功能,而是像一个可以放心交付、能独立演示、能持续维护的产品模块。
|
|
6
8
|
|
|
7
9
|
- 在线 Demo: [viewer.flyfish.dev](https://viewer.flyfish.dev)
|
|
8
|
-
-
|
|
9
|
-
- npm: [@flyfish-group/file-viewer3](https://www.npmjs.com/package/@flyfish-group/file-viewer3)
|
|
10
|
-
-
|
|
10
|
+
- 官方文档/组件主页: [doc.flyfish.dev](https://doc.flyfish.dev)
|
|
11
|
+
- npm(Vue3): [@flyfish-group/file-viewer3](https://www.npmjs.com/package/@flyfish-group/file-viewer3)
|
|
12
|
+
- npm(Vue2): [@flyfish-group/file-viewer](https://www.npmjs.com/package/@flyfish-group/file-viewer)
|
|
13
|
+
- 公开成品仓库: [github.com/flyfish-dev/file-viewer](https://github.com/flyfish-dev/file-viewer)
|
|
14
|
+
- 源码自助开通: [dev.flyfish.group/shop](https://dev.flyfish.group/shop)
|
|
15
|
+
|
|
16
|
+
## 当前发布版本
|
|
17
|
+
|
|
18
|
+
| 技术栈 | npm 包 | 最新版本 | 推荐分支 | 说明 |
|
|
19
|
+
| --- | --- | --- | --- | --- |
|
|
20
|
+
| Vue3 | `@flyfish-group/file-viewer3` | `1.0.7` | `v3` | 主推版本,在线 Demo 与后续上线均以此为准 |
|
|
21
|
+
| Vue2.7 | `@flyfish-group/file-viewer` | `1.0.7` | `main` | 兼容 Vue2 项目,格式能力与 Vue3 保持一致 |
|
|
11
22
|
|
|
12
23
|

|
|
13
24
|
|
|
14
25
|
## 为什么值得接入
|
|
15
26
|
|
|
16
|
-
-
|
|
17
|
-
-
|
|
18
|
-
-
|
|
19
|
-
- `.doc
|
|
20
|
-
-
|
|
27
|
+
- **纯前端 Serverless。** 文档解析和展示全部在浏览器内完成,部署简单,不依赖 Office 服务端、LibreOffice 守护进程或额外转码链路。
|
|
28
|
+
- **格式覆盖完整。** 当前内置 59 个扩展名映射,覆盖 Word、Excel、PowerPoint、PDF、OFD、CAD、Markdown、图片、代码/文本和 MP4,能覆盖绝大多数业务附件场景。
|
|
29
|
+
- **按需异步加载。** PDF、OFD、CAD、Office、Markdown 和代码高亮渲染器都按需加载,重型解析依赖不会进入其他格式的首屏路径。
|
|
30
|
+
- **阅读体验更像产品。** `.doc`、`.docx`、PDF 都保留灰色工作台、白色纸张、居中阅读和自适应缩放,避免“内容能打开但不好读”的落差。
|
|
31
|
+
- **Demo 更适合验收。** 示例文件按文档、表格、图纸、代码、图片等类型分组展示,点击样例即可打开并自动收起选择器。
|
|
32
|
+
- **Vue2 / Vue3 体验一致。** `main` 分支面向 Vue2.7,`v3` 分支面向 Vue3;两边共享完整格式覆盖、示例文件盒子、文档站和 iframe 集成体验。
|
|
33
|
+
- **组件和独立站两用。** 既支持在 Vue 项目里直接作为组件使用,也支持独立部署后通过 iframe 嵌入到任意系统,方便多业务线复用。
|
|
34
|
+
- **适合成品交付。** 官方文档、在线 Demo、公开成品仓库、混淆压缩产物、npm tarball 和静态部署产物都一起维护,便于下载、验收和二次接入。
|
|
21
35
|
|
|
22
36
|
## 支持格式
|
|
23
37
|
|
|
24
|
-
当前版本内置
|
|
38
|
+
当前版本内置 59 个扩展名映射,覆盖 11 条预览链路。
|
|
25
39
|
|
|
26
40
|
| 类别 | 扩展名 | 当前表现 | 适合场景 |
|
|
27
41
|
| --- | --- | --- | --- |
|
|
28
42
|
| Word | `docx` | `docx-preview`,更适合保留文档结构和版式 | 新生成的 Word 文档、正式文档 |
|
|
29
43
|
| Word | `doc` | `msdoc-viewer` + Word 风格页面容器 | 历史 `.doc` 老文档 |
|
|
30
|
-
| Excel | `xlsx` |
|
|
31
|
-
| Excel 兼容格式 | `xlsm`、`xlsb`、`xls`、`csv`、`ods`、`fods`、`numbers` |
|
|
44
|
+
| Excel | `xlsx` | `styled-exceljs` + 虚拟滚动,支持尺寸、合并和常见样式 | 需要保留表格结构和样式的业务 |
|
|
45
|
+
| Excel 兼容格式 | `xlsm`、`xlsb`、`xls`、`csv`、`ods`、`fods`、`numbers` | 统一解析,按格式可用信息渐进还原样式 | 老表格、轻量数据查看 |
|
|
32
46
|
| PowerPoint | `pptx` | 浏览幻灯片内容 | 汇报材料、课件、方案 |
|
|
33
|
-
| PDF | `pdf` | 基于 `pdfjs-dist`
|
|
47
|
+
| PDF | `pdf` | 基于 `pdfjs-dist` 预览,支持缩放工具栏、页码状态和可显隐导航窗格 | 合同、票据、版式成品 |
|
|
48
|
+
| OFD | `ofd` | 基于 `DLTech21/ofd.js` 仓库源码在线预览国产版式文档,避开 npm dist 授权 wasm 分支 | 电子发票、公文、归档材料 |
|
|
49
|
+
| CAD | `dxf` | 基于 `@cadview/core` 预览图纸,支持缩放、平移、图层控制 | 工程图纸、二维 CAD 附件 |
|
|
50
|
+
| CAD 兼容入口 | `dwg` | 提示转换为 DXF 后预览,不内置 GPL DWG 解析器 | 需要兼容上传入口的业务 |
|
|
34
51
|
| Markdown | `md`、`markdown` | Markdown 阅读样式 | README、知识文档、说明文档 |
|
|
35
52
|
| 图片 | `gif`、`jpg`、`jpeg`、`bmp`、`tiff`、`tif`、`png`、`svg`、`webp` | 原生图片浏览 | 图片附件、设计稿、Logo |
|
|
36
|
-
|
|
|
53
|
+
| 代码/文本 | `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` | 使用 `highlight.js` 轻量高亮,HTML 按源码展示 | 日志、配置、代码片段 |
|
|
37
54
|
| 视频 | `mp4` | 浏览器原生视频播放 | 演示视频、录屏 |
|
|
38
55
|
|
|
39
|
-
##
|
|
56
|
+
## 三条接入路线
|
|
40
57
|
|
|
41
58
|
### 1. Vue 3 组件集成
|
|
42
59
|
|
|
43
|
-
适合已经在 Vue 3
|
|
60
|
+
适合已经在 Vue 3 项目里开发,希望最短路径完成接入的团队。当前在线 Demo 和生产上线均以 `v3` 分支作为最终产物来源。
|
|
44
61
|
|
|
45
62
|
```bash
|
|
46
63
|
pnpm add @flyfish-group/file-viewer3
|
|
@@ -68,7 +85,45 @@ const url = ref('https://example.com/demo.pdf')
|
|
|
68
85
|
</template>
|
|
69
86
|
```
|
|
70
87
|
|
|
71
|
-
### 2.
|
|
88
|
+
### 2. Vue 2 组件集成
|
|
89
|
+
|
|
90
|
+
适合仍在 Vue2.7 技术栈上,希望直接以内嵌组件方式完成接入的团队。
|
|
91
|
+
|
|
92
|
+
```bash
|
|
93
|
+
pnpm add @flyfish-group/file-viewer
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
```ts
|
|
97
|
+
import Vue from 'vue'
|
|
98
|
+
import App from './App.vue'
|
|
99
|
+
import FileViewer from '@flyfish-group/file-viewer'
|
|
100
|
+
|
|
101
|
+
Vue.use(FileViewer)
|
|
102
|
+
|
|
103
|
+
new Vue({
|
|
104
|
+
render: h => h(App)
|
|
105
|
+
}).$mount('#app')
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
```vue
|
|
109
|
+
<template>
|
|
110
|
+
<div style="height: 100vh">
|
|
111
|
+
<file-viewer :url="url" />
|
|
112
|
+
</div>
|
|
113
|
+
</template>
|
|
114
|
+
|
|
115
|
+
<script>
|
|
116
|
+
export default {
|
|
117
|
+
data() {
|
|
118
|
+
return {
|
|
119
|
+
url: 'https://example.com/demo.pdf'
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
</script>
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
### 3. Iframe 嵌入
|
|
72
127
|
|
|
73
128
|
适合多系统共用一套预览器、想把预览能力独立部署、或者不希望把解析依赖带进业务包的场景。
|
|
74
129
|
|
|
@@ -90,6 +145,7 @@ const url = ref('https://example.com/demo.pdf')
|
|
|
90
145
|
- 预览器会填满父容器,请为父容器提供稳定高度
|
|
91
146
|
- 使用 `url` 预览时,目标资源需要允许浏览器访问;跨域场景下需要正确配置 CORS
|
|
92
147
|
- 如果下载地址本身没有明确扩展名,建议先在业务侧取回文件,再包装成 `File`
|
|
148
|
+
- OFD、CAD、PDF、Office、Markdown 和代码高亮渲染器都按需异步加载,只有命中格式时才拉取对应代码块
|
|
93
149
|
|
|
94
150
|
```ts
|
|
95
151
|
const blob = await response.blob()
|
|
@@ -98,6 +154,8 @@ const file = new File([blob], 'contract.pdf', { type: blob.type })
|
|
|
98
154
|
|
|
99
155
|
## 本地开发
|
|
100
156
|
|
|
157
|
+
下面的命令适用于源码开通后的完整项目。公开 GitHub 成品仓库不包含源码目录,普通用户建议直接通过 npm、`dist/` 或 `artifacts/` 里的 tarball 使用。
|
|
158
|
+
|
|
101
159
|
```bash
|
|
102
160
|
pnpm install
|
|
103
161
|
pnpm dev
|
|
@@ -113,22 +171,48 @@ pnpm dev
|
|
|
113
171
|
|
|
114
172
|
## 打包发布
|
|
115
173
|
|
|
174
|
+
Vue3 和 Vue2 发包时分别在对应分支执行同一套发布链路:
|
|
175
|
+
|
|
176
|
+
| 包 | 分支 | npm 名称 |
|
|
177
|
+
| --- | --- | --- |
|
|
178
|
+
| Vue3 | `v3` | `@flyfish-group/file-viewer3` |
|
|
179
|
+
| Vue2.7 | `main` | `@flyfish-group/file-viewer` |
|
|
180
|
+
|
|
116
181
|
建议在发布前执行下面这组命令:
|
|
117
182
|
|
|
118
183
|
```bash
|
|
119
184
|
pnpm type-check
|
|
120
185
|
pnpm build
|
|
121
186
|
pnpm build-lib
|
|
187
|
+
pnpm obfuscate
|
|
122
188
|
pnpm docs:build
|
|
123
189
|
npm pack
|
|
124
190
|
```
|
|
125
191
|
|
|
126
192
|
其中:
|
|
127
193
|
|
|
128
|
-
- `dist/`
|
|
194
|
+
- `dist/` 是库构建产物;执行 `pnpm obfuscate` 后会对其中的 `.js` / `.mjs` 进行压缩混淆
|
|
195
|
+
- `pnpm build` 会生成可独立部署的 Demo 静态站点产物
|
|
129
196
|
- `docs/.vitepress/dist/` 是文档站静态产物
|
|
130
197
|
- `npm pack` 会生成可直接发布或分发的 npm 包 tarball
|
|
131
198
|
|
|
199
|
+
如果只是准备 npm 包,可以直接执行:
|
|
200
|
+
|
|
201
|
+
```bash
|
|
202
|
+
pnpm release:pack
|
|
203
|
+
```
|
|
204
|
+
|
|
205
|
+
发布到 npm:
|
|
206
|
+
|
|
207
|
+
```bash
|
|
208
|
+
npm publish --dry-run --access public
|
|
209
|
+
npm publish --access public
|
|
210
|
+
```
|
|
211
|
+
|
|
212
|
+
如果 npm 账号启用了 MFA,请使用交互式终端完成浏览器确认后再等待发布结果。
|
|
213
|
+
|
|
214
|
+
公开 GitHub 仓库只提交可直接使用的构建产物、示例、文档和 npm tarball,不提交当前源码目录。需要源码、二开包或商业自助开通的用户,可以前往 [https://dev.flyfish.group/shop](https://dev.flyfish.group/shop),付费 4.99 后自助开通。
|
|
215
|
+
|
|
132
216
|
## 文档导航
|
|
133
217
|
|
|
134
218
|
- [文档导览](https://doc.flyfish.dev/guide/)
|
|
@@ -142,4 +226,4 @@ npm pack
|
|
|
142
226
|
|
|
143
227
|
本项目使用 `Apache-2.0` 许可证。
|
|
144
228
|
|
|
145
|
-
|
|
229
|
+
二开或商用时,请按许可证要求保留版权、许可证和来源说明,并注明项目来源为 Flyfish Viewer / `@flyfish-group/file-viewer3` 或 `@flyfish-group/file-viewer`。如果你基于本项目修复了通用问题或增强了通用能力,也欢迎通过 issue / PR 一起贡献回来,让这套预览能力继续变得更稳。
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
const af=k;(function(R,U){const ae=k,V=R();while(!![]){try{const W=parseInt(ae(0x17b))/0x1+-parseInt(ae(0x16b))/0x2*(parseInt(ae(0x176))/0x3)+-parseInt(ae(0x173))/0x4*(-parseInt(ae(0x177))/0x5)+-parseInt(ae(0x16d))/0x6+-parseInt(ae(0x16a))/0x7+parseInt(ae(0x16c))/0x8+parseInt(ae(0x179))/0x9;if(W===U)break;else V['push'](V['shift']());}catch(X){V['push'](V['shift']());}}}(j,0x397ba));import{n as q,t}from'./asyncToGenerator.js';import{n,t as z}from'./objectSpread2.js';import{t as A}from'./_plugin-vue_export-helper.js';import{Fragment as B,createCommentVNode as F,createElementBlock as G,createElementVNode as H,defineComponent as I,nextTick as J,normalizeClass as K,onBeforeUnmount as L,onMounted as M,openBlock as N,ref as O,renderList as P,toDisplayString as Q}from'vue';n(),q();var v={'class':'cad-viewer'},y={'class':'cad-toolbar'},b={'class':af(0x16e)},x={'class':'cad-body'},S={'key':0x0,'class':'cad-layers'},C=[af(0x16f)],w={'class':'cad-canvas-wrap'},T={'key':0x0,'class':'cad-state'},E={'key':0x1,'class':'cad-state\x20error'},D=A(I({'__name':'CadViewer','props':{'data':{},'type':{}},'setup'(U){const ag=af;let V=U,W=O(null),X=O([]),Y=O('pan'),Z=O(ag(0x17d)),a0=O(''),a1=null,a2=null,a3={'dwg':'DWG\x20是专有\x20CAD\x20格式,当前\x20Apache\x20许可包未内置\x20GPL\x20转换器。请优先上传\x20DXF,或在业务侧转换为\x20DXF\x20后预览。'},a4=aa=>aa instanceof Error?aa['message']:typeof aa=='string'?aa:JSON['stringify'](aa),a5=aa=>{const ah=ag;Y[ah(0x170)]=aa,a1==null||a1['setTool'](aa);},a6=()=>{a1==null||a1['resize'](),a1==null||a1['fitToView']();},a7=aa=>{let ab=aa['isOff'];a1==null||a1['setLayerVisible'](aa['name'],ab),X['value']=X['value']['map'](ac=>ac['name']===aa['name']?z(z({},ac),{},{'isOff':!ab}):ac);},a8=(function(){var aa=t(function*(){const ai=k;let ab=W['value'];if(ab){Z[ai(0x170)]='loading',a0['value']='';try{let {CadViewer:ac}=yield import('./dist.js');a1==null||a1['destroy'](),a1=new ac(ab,{'theme':'light','initialTool':Y['value'],'worker':!0x1}),a1[ai(0x17e)](V['data']),yield J(),a6(),X['value']=a1['getLayers'](),Z['value']='ready';}catch(ad){console['error'](ad),Z['value']='error',a0[ai(0x170)]=a4(ad)||'CAD\x20图纸解析失败';}}});return function(){return aa['apply'](this,arguments);};}()),a9=(function(){var aa=t(function*(){let ab=V['type']['toLowerCase']();if(a3[ab]){Z['value']='error',a0['value']=a3[ab];return;}yield a8();});return function(){return aa['apply'](this,arguments);};}());return M(()=>{const aj=ag;a9();let aa=W[aj(0x170)];aa&&(a2=new ResizeObserver(()=>{a1==null||a1['resize'](),a1==null||a1['requestRender']();}),a2[aj(0x17c)](aa));}),L(()=>{const ak=ag;a2==null||a2[ak(0x175)](),a2=null,a1==null||a1['destroy'](),a1=null;}),(aa,ab)=>(N(),G(ag(0x174),v,[H('div',y,[H('div',b,[H('button',{'type':'button','class':K({'active':Y['value']==='pan'}),'onClick':ab[0x0]||(ab[0x0]=ac=>a5('pan'))},'平移',0x2),H(ag(0x17a),{'type':'button','class':K({'active':Y[ag(0x170)]==='select'}),'onClick':ab[0x1]||(ab[0x1]=ac=>a5('select'))},'选择',0x2),H('button',{'type':ag(0x17a),'class':K({'active':Y['value']===ag(0x178)}),'onClick':ab[0x2]||(ab[0x2]=ac=>a5('measure'))},'测量',0x2),H(ag(0x17a),{'type':'button','onClick':a6},'适配')]),H('span',null,Q(U['type']['toUpperCase']()),0x1)]),H('div',x,[X['value']['length']?(N(),G('aside',S,[(N(!0x0),G(B,null,P(X['value'],ac=>(N(),G('button',{'key':ac['name'],'type':'button','class':K({'muted':ac['isOff']}),'onClick':ad=>a7(ac)},Q(ac['name']),0xb,C))),0x80))])):F('',!0x0),H(ag(0x174),w,[H(ag(0x172),{'ref_key':'canvas','ref':W},null,0x200),Z['value']==='loading'?(N(),G('div',T,'正在解析\x20CAD...')):Z['value']===ag(0x171)?(N(),G(ag(0x174),E,Q(a0[ag(0x170)]),0x1)):F('',!0x0)])])]));}}),[['__scopeId','data-v-cf49f0f1']]);export{D as default};function k(a,b){a=a-0x16a;const c=j();let d=c[a];return d;}function j(){const al=['123764XFjCbK','2878488AnsJdq','1747908CzpKyl','cad-tools','onClick','value','error','canvas','518824UXtVIQ','div','disconnect','18vsefqp','10tgayiE','measure','4173021UNhQqT','button','57570oeIyul','observe','loading','loadArrayBuffer','1696814gKmGTZ'];j=function(){return al;};return j();}
|