@flyfish-group/file-viewer3 1.0.4 → 1.0.6

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.
Files changed (81) hide show
  1. package/LICENSE +160 -0
  2. package/README.md +119 -98
  3. package/dist/components/CadViewer.js +1 -0
  4. package/dist/components/CodeViewer.js +1 -0
  5. package/dist/components/ImageViewer.js +1 -1950
  6. package/dist/components/MarkdownViewer.js +1 -1468
  7. package/dist/components/OfdViewer.js +1 -0
  8. package/dist/components/PdfView.js +1 -22630
  9. package/dist/components/PptxRender.js +1 -21748
  10. package/dist/components/XlsxTable.js +1 -53804
  11. package/dist/components/_plugin-vue_export-helper.js +1 -0
  12. package/dist/components/asyncToGenerator.js +1 -0
  13. package/dist/components/chunk.js +1 -0
  14. package/dist/components/dist.js +1 -0
  15. package/dist/components/docx-preview.js +1 -5622
  16. package/dist/components/jszip.min.js +1 -0
  17. package/dist/components/objectSpread2.js +1 -0
  18. package/dist/components/ofd.js +1 -0
  19. package/dist/components/use.js +1 -0
  20. package/dist/components/worker-ref.js +1 -21
  21. package/dist/components/wrapAsyncGenerator.js +1 -0
  22. package/dist/file-viewer3.css +2 -0
  23. package/dist/index.mjs +1 -6
  24. package/dist/index.umd.js +1 -247
  25. package/dist/src/components/utils.d.ts +3 -0
  26. package/dist/src/main.d.ts +0 -0
  27. package/dist/src/package/common/type.d.ts +30 -0
  28. package/dist/src/package/common/util.d.ts +5 -0
  29. package/dist/src/package/common/worker-ref.d.ts +12 -0
  30. package/dist/src/package/components/FileViewer/FileViewer.vue.d.ts +8 -0
  31. package/dist/src/package/components/FileViewer/index.d.ts +2 -0
  32. package/dist/src/package/components/FileViewer/util.d.ts +2 -0
  33. package/dist/src/package/index.d.ts +15 -3
  34. package/dist/src/package/use/index.d.ts +2 -0
  35. package/dist/src/package/use/loading.d.ts +33 -0
  36. package/dist/src/package/use/worker.d.ts +24 -0
  37. package/dist/src/package/vendors/cad/CadViewer.vue.d.ts +7 -0
  38. package/dist/src/package/vendors/cad/index.d.ts +7 -0
  39. package/dist/src/package/vendors/image/ImageViewer.vue.d.ts +6 -0
  40. package/dist/src/package/vendors/image/index.d.ts +4 -0
  41. package/dist/src/package/vendors/md/MarkdownViewer.vue.d.ts +6 -0
  42. package/dist/src/package/vendors/md/index.d.ts +4 -0
  43. package/dist/src/package/vendors/mp4/index.d.ts +4 -0
  44. package/dist/src/package/vendors/ofd/OfdViewer.vue.d.ts +6 -0
  45. package/dist/src/package/vendors/ofd/index.d.ts +7 -0
  46. package/dist/src/package/vendors/pdf/PdfView.vue.d.ts +6 -0
  47. package/dist/src/package/vendors/pdf/index.d.ts +1 -0
  48. package/dist/src/package/vendors/pdf/worker/index.d.ts +4 -0
  49. package/dist/src/package/vendors/pptx/PptxRender.vue.d.ts +9 -0
  50. package/dist/src/package/vendors/pptx/index.d.ts +6 -0
  51. package/dist/src/package/vendors/pptx/options.d.ts +39 -0
  52. package/dist/src/package/vendors/pptx/support/chart.d.ts +4 -0
  53. package/dist/src/package/vendors/pptx/worker/index.d.ts +4 -0
  54. package/dist/src/package/vendors/renders.d.ts +3 -0
  55. package/dist/src/package/vendors/text/CodeViewer.vue.d.ts +7 -0
  56. package/dist/src/package/vendors/text/index.d.ts +10 -0
  57. package/dist/src/package/vendors/word/doc.d.ts +5 -0
  58. package/dist/src/package/vendors/word/docx.d.ts +5 -0
  59. package/dist/src/package/vendors/word/index.d.ts +3 -0
  60. package/dist/src/package/vendors/xlsx/XlsxTable.state.d.ts +79 -0
  61. package/dist/src/package/vendors/xlsx/XlsxTable.view.d.ts +22 -0
  62. package/dist/src/package/vendors/xlsx/XlsxTable.vue.d.ts +6 -0
  63. package/dist/src/package/vendors/xlsx/index.d.ts +5 -0
  64. package/dist/src/package/vendors/xlsx/util.d.ts +8 -0
  65. package/dist/src/package/vendors/xlsx/worker/index.d.ts +4 -0
  66. package/dist/src/package/vendors/xlsx/worker/sheetjs/SheetJsModel.d.ts +69 -0
  67. package/dist/src/package/vendors/xlsx/worker/sheetjs/color.d.ts +2 -0
  68. package/dist/src/package/vendors/xlsx/worker/sheetjs/index.d.ts +4 -0
  69. package/dist/src/package/vendors/xlsx/worker/sheetjs/sheet.worker.d.ts +1 -0
  70. package/dist/worker/pdf.worker.js +1 -58
  71. package/dist/worker/pptx.worker.js +1 -21
  72. package/dist/worker/sheet.worker.js +1 -38
  73. package/package.json +62 -41
  74. package/.vscode/extensions.json +0 -3
  75. package/dist/components/_commonjs-dynamic-modules.js +0 -6
  76. package/dist/components/_commonjsHelpers.js +0 -30
  77. package/dist/components/index.js +0 -1837
  78. package/dist/favicon.ico +0 -0
  79. package/dist/index.d.ts +0 -47
  80. package/dist/style.css +0 -57
  81. 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
@@ -1,149 +1,170 @@
1
- # 基于Vue3实现的文件在线预览 file-viewer
2
- 本项目作为当前仓库的vue3构建版本,会跟随vue2版本持续更新,敬请期待,欢迎提交issue和交流技术。
1
+ # Flyfish Viewer
3
2
 
4
- 注意,当前版本在`v3`分支。如果要使用Vue2版本,请访问
3
+ 把 Word、Excel、PPT、PDF 和图片稳稳带进浏览器里。
5
4
 
6
- https://blog.csdn.net/wybaby168/article/details/129264431
5
+ `@flyfish-group/file-viewer3` 是一款基于 Vue 3、TypeScript 和 Vite 构建的纯前端文件预览组件。它不依赖后端转码服务,适合接入 OA、知识库、附件中心、流程系统和需要离线能力的业务场景。这个项目的目标很直接: 让文档预览不再像临时拼出来的功能,而是像一个可以放心交付、能独立演示、能持续维护的产品模块。
7
6
 
8
- 本项目是本人基于实际工作共享的第一个小项目,诞生于2022年上旬。目前实现了基本格式的预览。
9
- 本项目按计划支持vue3 + vite,并持续优化pptx和word模块。
7
+ - 在线 Demo: [viewer.flyfish.dev](https://viewer.flyfish.dev)
8
+ - 官方文档/组件主页: [doc.flyfish.dev](https://doc.flyfish.dev)
9
+ - npm: [@flyfish-group/file-viewer3](https://www.npmjs.com/package/@flyfish-group/file-viewer3)
10
+ - 公开成品仓库: [github.com/flyfish-dev/file-viewer](https://github.com/flyfish-dev/file-viewer)
11
+ - 源码自助开通: [dev.flyfish.group/shop](https://dev.flyfish.group/shop)
10
12
 
11
- 欢迎各位友友们提交工单和P/R,感谢大家!
13
+ ![Flyfish Viewer demo](https://doc.flyfish.dev/_images/demo-main.png)
12
14
 
15
+ ## 为什么值得接入
13
16
 
17
+ - **纯前端 Serverless。** 文档解析和展示全部在浏览器内完成,部署简单,不依赖 Office 服务端、LibreOffice 守护进程或额外转码链路。
18
+ - **格式覆盖完整。** 当前内置 59 个扩展名映射,覆盖 Word、Excel、PowerPoint、PDF、OFD、CAD、Markdown、图片、代码/文本和 MP4,能覆盖绝大多数业务附件场景。
19
+ - **按需异步加载。** PDF、OFD、CAD、Office、Markdown 和代码高亮渲染器都按需加载,重型解析依赖不会进入其他格式的首屏路径。
20
+ - **阅读体验更像产品。** `.doc`、`.docx`、PDF 都保留灰色工作台、白色纸张、居中阅读和自适应缩放,避免“内容能打开但不好读”的落差。
21
+ - **Demo 更适合验收。** 示例文件按文档、表格、图纸、代码、图片等类型分组展示,点击样例即可打开并自动收起选择器。
22
+ - **组件和独立站两用。** 既支持在 Vue 3 项目里直接作为组件使用,也支持独立部署后通过 iframe 嵌入到任意系统,方便多业务线复用。
23
+ - **适合成品交付。** 官方文档、在线 Demo、公开成品仓库、混淆压缩产物、npm tarball 和静态部署产物都一起维护,便于下载、验收和二次接入。
14
24
 
15
- > Vue3版本特性:
16
- >
17
- > 1. 高质量的TypeScript代码重构模块,更加优雅的实现等你发现
18
- > 2. 使用极速响应的Vite架构,畅快开发
19
- > 3. 完全重构了部分模块,如Word,Excel,Pptx等组件
20
- > 4. 优化Excel主题颜色解析,完美还原Excel样式
21
- > 5. 优化Pptx响应速度,使用重用逻辑
22
- > 6. 优化Pptx加载项,解耦图表部分,待重构解耦相关NvD3依赖。
23
- > 7. 使用完全的组合式API构建应用,高性能低占用
24
- > 8. 解耦了样式依赖,FileViewer组件依赖父节点进行布局,自动填满
25
+ ## 支持格式
25
26
 
27
+ 当前版本内置 59 个扩展名映射,覆盖 11 条预览链路。
26
28
 
29
+ | 类别 | 扩展名 | 当前表现 | 适合场景 |
30
+ | --- | --- | --- | --- |
31
+ | Word | `docx` | `docx-preview`,更适合保留文档结构和版式 | 新生成的 Word 文档、正式文档 |
32
+ | Word | `doc` | `msdoc-viewer` + Word 风格页面容器 | 历史 `.doc` 老文档 |
33
+ | Excel | `xlsx` | `styled-exceljs` + 虚拟滚动,支持尺寸、合并和常见样式 | 需要保留表格结构和样式的业务 |
34
+ | Excel 兼容格式 | `xlsm`、`xlsb`、`xls`、`csv`、`ods`、`fods`、`numbers` | 统一解析,按格式可用信息渐进还原样式 | 老表格、轻量数据查看 |
35
+ | PowerPoint | `pptx` | 浏览幻灯片内容 | 汇报材料、课件、方案 |
36
+ | PDF | `pdf` | 基于 `pdfjs-dist` 预览,支持缩放工具栏、页码状态和可显隐导航窗格 | 合同、票据、版式成品 |
37
+ | OFD | `ofd` | 基于 `DLTech21/ofd.js` 仓库源码在线预览国产版式文档,避开 npm dist 授权 wasm 分支 | 电子发票、公文、归档材料 |
38
+ | CAD | `dxf` | 基于 `@cadview/core` 预览图纸,支持缩放、平移、图层控制 | 工程图纸、二维 CAD 附件 |
39
+ | CAD 兼容入口 | `dwg` | 提示转换为 DXF 后预览,不内置 GPL DWG 解析器 | 需要兼容上传入口的业务 |
40
+ | Markdown | `md`、`markdown` | Markdown 阅读样式 | README、知识文档、说明文档 |
41
+ | 图片 | `gif`、`jpg`、`jpeg`、`bmp`、`tiff`、`tif`、`png`、`svg`、`webp` | 原生图片浏览 | 图片附件、设计稿、Logo |
42
+ | 代码/文本 | `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 按源码展示 | 日志、配置、代码片段 |
43
+ | 视频 | `mp4` | 浏览器原生视频播放 | 演示视频、录屏 |
27
44
 
28
- ## 快速开始
45
+ ## 两条接入路线
29
46
 
30
- ### 1. 项目安装
47
+ ### 1. Vue 3 组件集成
31
48
 
32
- ```
33
- npm install
34
- ```
49
+ 适合已经在 Vue 3 项目里开发,希望最短路径完成接入的团队。
35
50
 
36
- ### 2. 项目编译以及支持热加载的开发模式
37
- ```
38
- npm run dev
51
+ ```bash
52
+ pnpm add @flyfish-group/file-viewer3
39
53
  ```
40
54
 
41
- ### 3. 编译生产包并最小化文件资源
42
- ```
43
- npm run build
44
- ```
55
+ ```ts
56
+ import { createApp } from 'vue'
57
+ import App from './App.vue'
58
+ import FileViewer from '@flyfish-group/file-viewer3'
45
59
 
46
- ### 4. 检测并修复 JavaScript 代码中的问题
47
- ```
48
- npm run lint
60
+ createApp(App).use(FileViewer).mount('#app')
49
61
  ```
50
62
 
63
+ ```vue
64
+ <script setup lang="ts">
65
+ import { ref } from 'vue'
51
66
 
67
+ const url = ref('https://example.com/demo.pdf')
68
+ </script>
52
69
 
53
- ## 集成指南
54
-
55
- ### 1. 项目引用集成
70
+ <template>
71
+ <div style="height: 100vh">
72
+ <file-viewer :url="url" />
73
+ </div>
74
+ </template>
75
+ ```
56
76
 
57
- > Tips: 本集成方式将会全量引入本项目的所有代码和依赖,所以可能会在您的项目中产生依赖版本冲突,请注意甄别。如果发生很多的依赖冲突,建议立即更换iframe集成方式,更轻量级,且日后能够无缝升级。
77
+ ### 2. Iframe 嵌入
58
78
 
59
- 如果您使用了flyfish的私库,请使用以下命令安装依赖即可。
79
+ 适合多系统共用一套预览器、想把预览能力独立部署、或者不希望把解析依赖带进业务包的场景。
60
80
 
81
+ ```html
82
+ <iframe
83
+ id="viewer"
84
+ src="https://viewer.flyfish.dev?url=https%3A%2F%2Fexample.com%2Fdemo.docx"
85
+ style="width: 100%; height: 100%; border: 0"
86
+ ></iframe>
61
87
  ```
62
- npm install --save @flyfish-group/file-viewer3
63
- ```
64
-
65
- 常规情况下,请使用`npm link`的方式进行集成。
66
88
 
67
- 假设您将本项目clone到了`D:\Works\file-viewer`下,接下来请按照下面的步骤进行安装。
89
+ 更完整的二进制推送方案、`from` 安全校验和宿主页面示例,请查看文档站中的 [Iframe 嵌入说明](https://doc.flyfish.dev/guide/iframe)。
68
90
 
69
- 首先,打开命令行工具,`cd [你的项目位置]`,然后执行`npm link D:\Works\file-viewer `。最后,在您的项目中引用即可。
70
-
71
- ```javascript
72
- import { createApp } from 'vue'
73
- import App from './App.vue'
74
- import FileViewer from 'file-viewer3'
91
+ ## 使用说明
75
92
 
76
- createApp(App).use(FileViewer)
77
- .mount('#app')
93
+ - 组件支持两条主要输入路径: `url?: string` 与 `file?: File`
94
+ - 当 `file` 和 `url` 同时存在时,会优先渲染 `file`
95
+ - 如果业务侧拿到的是 `Blob` 或 `ArrayBuffer`,推荐先包装成带扩展名的 `File`
96
+ - 预览器会填满父容器,请为父容器提供稳定高度
97
+ - 使用 `url` 预览时,目标资源需要允许浏览器访问;跨域场景下需要正确配置 CORS
98
+ - 如果下载地址本身没有明确扩展名,建议先在业务侧取回文件,再包装成 `File`
99
+ - OFD、CAD、PDF、Office、Markdown 和代码高亮渲染器都按需异步加载,只有命中格式时才拉取对应代码块
78
100
 
101
+ ```ts
102
+ const blob = await response.blob()
103
+ const file = new File([blob], 'contract.pdf', { type: blob.type })
79
104
  ```
80
105
 
81
- 然后,只需要在您的项目中直接使用组件即可。
106
+ ## 本地开发
82
107
 
83
- 注意:您需要自己定义好预览器的父元素,预览器默认会占满父元素。
108
+ 下面的命令适用于源码开通后的完整项目。公开 GitHub 成品仓库不包含源码目录,普通用户建议直接通过 npm、`dist/` 或 `artifacts/` 里的 tarball 使用。
84
109
 
85
- 示例如下,该示例定义了一个全屏的预览控件,并传入了一个url用于展示:
110
+ ```bash
111
+ pnpm install
112
+ pnpm dev
113
+ ```
86
114
 
87
- ```html
88
- <script setup lang='ts'>
89
- import { onMounted, ref } from 'vue'
115
+ 常用脚本:
90
116
 
91
- const url = ref<string>()
117
+ - `pnpm build`: 构建示例站点
118
+ - `pnpm build-lib`: 构建组件库产物
119
+ - `pnpm docs:dev`: 启动 VitePress 文档站
120
+ - `pnpm docs:build`: 构建文档站
121
+ - `pnpm type-check`: 执行 TypeScript 类型检查
92
122
 
93
- onMounted(() => {
94
- url.value = 'https://flyfish.dev/%E6%95%B0%E6%8D%AE%E4%B8%AD%E5%8F%B0%E7%AC%94%E8%AE%B0(1).docx';
95
- })
96
- </script>
97
- <template>
98
- <div class='simple-view'>
99
- <file-viewer :url="url" />
100
- </div>
101
- </template>
102
-
103
- <style scoped>
104
- .simple-view {
105
- height: 100vh;
106
- }
107
- </style>
123
+ ## 打包发布
108
124
 
125
+ 建议在发布前执行下面这组命令:
109
126
 
127
+ ```bash
128
+ pnpm type-check
129
+ pnpm build
130
+ pnpm build-lib
131
+ pnpm obfuscate
132
+ pnpm docs:build
133
+ npm pack
110
134
  ```
111
135
 
112
- 此外,组件还支持直接传入文件或者二进制进行展示。具体请查看`HelloWord.vue`。
136
+ 其中:
113
137
 
114
- ### 2. 使用iframe集成(推荐)
138
+ - `dist/` 是库构建产物;执行 `pnpm obfuscate` 后会对其中的 `.js` / `.mjs` 进行压缩混淆
139
+ - `pnpm build` 会生成可独立部署的 Demo 静态站点产物
140
+ - `docs/.vitepress/dist/` 是文档站静态产物
141
+ - `npm pack` 会生成可直接发布或分发的 npm 包 tarball
115
142
 
116
- 注:本部分示例代码位于`master`分支。
143
+ 如果只是准备 npm 包,可以直接执行:
117
144
 
118
- #### 开发集成:
145
+ ```bash
146
+ pnpm release:pack
147
+ ```
119
148
 
120
- 1. 请按照“快速开始”章节运行您的示例项目
121
- 2. 打开`example`文件夹中的`embedded.html`,修改目标地址为本地调试地址
149
+ 发布到 npm:
122
150
 
123
- ```javascript
124
- var context = {
125
- // 查看器的源,当前示例为在线,本地测试请改为 http://localhost:8900
126
- origin: 'http://localhost:8900',
127
- // 目标frame
128
- frame: null,
129
- // 文件url
130
- url: './word.docx'
131
- };
151
+ ```bash
152
+ npm publish --access public
132
153
  ```
133
154
 
134
- 3. 直接打开该文件或者使用本地web服务访问。
135
- 4. 具体请参考demo代码,原理是基于`iframe`跨域通信机制。
136
-
137
- ![image-20230228161454443](/Users/wangyu/Library/Application Support/typora-user-images/image-20230228161454443.png)
155
+ 公开 GitHub 仓库只提交可直接使用的构建产物、示例、文档和 npm tarball,不提交当前源码目录。需要源码、二开包或商业自助开通的用户,可以前往 [https://dev.flyfish.group/shop](https://dev.flyfish.group/shop),付费 4.99 后自助开通。
138
156
 
157
+ ## 文档导航
139
158
 
159
+ - [文档导览](https://doc.flyfish.dev/guide/)
160
+ - [快速开始](https://doc.flyfish.dev/guide/quickstart)
161
+ - [Demo 说明](https://doc.flyfish.dev/guide/demo)
162
+ - [组件用法](https://doc.flyfish.dev/guide/usage)
163
+ - [支持格式](https://doc.flyfish.dev/guide/formats)
164
+ - [本地开发与打包](https://doc.flyfish.dev/guide/development)
140
165
 
141
- ## 更新日志
142
- #### [feature]`v1.0.7` `2022年4月24日`
143
- 1. 修复基于依赖的项目,无法预览pdf的问题
166
+ ## 开源说明
144
167
 
145
- #### [feature]`v1.0.6` `2022年4月23日`
168
+ 本项目使用 `Apache-2.0` 许可证。
146
169
 
147
- 1. 解决部分pdf字体不显示的问题
148
- 2. 增加pdf预览初始缩放大小,自动适配页面。调整pdf预览缩放下限为0.5
149
- 3. demo增加url预览模式,在请求参数中添加`url=文件地址`,可自动拉取并渲染文件
170
+ 二开或商用时,请按许可证要求保留版权、许可证和来源说明,并注明项目来源为 Flyfish Viewer / `@flyfish-group/file-viewer3`。如果你基于本项目修复了通用问题或增强了通用能力,也欢迎通过 issue / PR 一起贡献回来,让这套预览能力继续变得更稳。
@@ -0,0 +1 @@
1
+ (function(R,U){const ae=k,V=R();while(!![]){try{const W=-parseInt(ae(0x172))/0x1+parseInt(ae(0x177))/0x2+-parseInt(ae(0x176))/0x3*(-parseInt(ae(0x173))/0x4)+parseInt(ae(0x16b))/0x5+-parseInt(ae(0x167))/0x6*(-parseInt(ae(0x169))/0x7)+-parseInt(ae(0x168))/0x8*(parseInt(ae(0x16e))/0x9)+-parseInt(ae(0x16d))/0xa;if(W===U)break;else V['push'](V['shift']());}catch(X){V['push'](V['shift']());}}}(j,0x28da0));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':'cad-tools'},x={'class':'cad-body'},S={'key':0x0,'class':'cad-layers'},C=['onClick'],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 af=k;let V=U,W=O(null),X=O([]),Y=O('pan'),Z=O(af(0x17f)),a0=O(''),a1=null,a2=null,a3={'dwg':af(0x175)},a4=aa=>aa instanceof Error?aa['message']:typeof aa==af(0x170)?aa:JSON[af(0x178)](aa),a5=aa=>{Y['value']=aa,a1==null||a1['setTool'](aa);},a6=()=>{a1==null||a1['resize'](),a1==null||a1['fitToView']();},a7=aa=>{const ag=af;let ab=aa[ag(0x174)];a1==null||a1[ag(0x165)](aa['name'],ab),X['value']=X['value'][ag(0x16a)](ac=>ac['name']===aa['name']?z(z({},ac),{},{'isOff':!ab}):ac);},a8=(function(){var aa=t(function*(){const ah=k;let ab=W['value'];if(ab){Z['value']=ah(0x17f),a0['value']='';try{let {CadViewer:ac}=yield import('./dist.js');a1==null||a1['destroy'](),a1=new ac(ab,{'theme':ah(0x16c),'initialTool':Y['value'],'worker':!0x1}),a1['loadArrayBuffer'](V[ah(0x171)]),yield J(),a6(),X['value']=a1['getLayers'](),Z['value']='ready';}catch(ad){console['error'](ad),Z['value']='error',a0['value']=a4(ad)||'CAD\x20图纸解析失败';}}});return function(){const ai=k;return aa[ai(0x17e)](this,arguments);};}()),a9=(function(){var aa=t(function*(){const aj=k;let ab=V[aj(0x166)]['toLowerCase']();if(a3[ab]){Z['value']='error',a0['value']=a3[ab];return;}yield a8();});return function(){return aa['apply'](this,arguments);};}());return M(()=>{a9();let aa=W['value'];aa&&(a2=new ResizeObserver(()=>{a1==null||a1['resize'](),a1==null||a1['requestRender']();}),a2['observe'](aa));}),L(()=>{a2==null||a2['disconnect'](),a2=null,a1==null||a1['destroy'](),a1=null;}),(aa,ab)=>(N(),G(af(0x179),v,[H('div',y,[H('div',b,[H('button',{'type':'button','class':K({'active':Y['value']===af(0x16f)}),'onClick':ab[0x0]||(ab[0x0]=ac=>a5('pan'))},'平移',0x2),H(af(0x17c),{'type':'button','class':K({'active':Y['value']==='select'}),'onClick':ab[0x1]||(ab[0x1]=ac=>a5('select'))},'选择',0x2),H('button',{'type':'button','class':K({'active':Y[af(0x17d)]==='measure'}),'onClick':ab[0x2]||(ab[0x2]=ac=>a5('measure'))},'测量',0x2),H('button',{'type':'button','onClick':a6},'适配')]),H('span',null,Q(U[af(0x166)]['toUpperCase']()),0x1)]),H('div',x,[X['value']['length']?(N(),G(af(0x17a),S,[(N(!0x0),G(B,null,P(X['value'],ac=>(N(),G('button',{'key':ac[af(0x17b)],'type':'button','class':K({'muted':ac['isOff']}),'onClick':ad=>a7(ac)},Q(ac['name']),0xb,C))),0x80))])):F('',!0x0),H('div',w,[H('canvas',{'ref_key':'canvas','ref':W},null,0x200),Z[af(0x17d)]==='loading'?(N(),G('div',T,'正在解析\x20CAD...')):Z['value']==='error'?(N(),G('div',E,Q(a0['value']),0x1)):F('',!0x0)])])]));}}),[['__scopeId','data-v-cf49f0f1']]);function j(){const ak=['light','3023320XmqUnI','17937xVSPqy','pan','string','data','212494HljDUd','8gvizzU','isOff','DWG\x20是专有\x20CAD\x20格式,当前\x20Apache\x20许可包未内置\x20GPL\x20转换器。请优先上传\x20DXF,或在业务侧转换为\x20DXF\x20后预览。','358008ORqIGv','144988PQkjol','stringify','div','aside','name','button','value','apply','loading','setLayerVisible','type','5178xwOBbl','536Hmgryn','1967pCfDXg','map','1310080xiNtxs'];j=function(){return ak;};return j();}function k(a,b){a=a-0x165;const c=j();let d=c[a];return d;}export{D as default};