@flyfish-group/file-viewer3 1.0.4 → 1.0.5
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.md +100 -104
- package/dist/components/ImageViewer.js +144 -144
- package/dist/components/MarkdownViewer.js +2 -1
- package/dist/components/PdfView.js +8 -8
- package/dist/components/PptxRender.js +10790 -10110
- package/dist/components/XlsxTable.js +18904 -17240
- package/dist/components/docx-preview.js +1600 -1427
- package/dist/components/index.js +4133 -1056
- package/dist/index.d.ts +9 -8
- package/dist/index.umd.js +201 -135
- package/dist/style.css +13 -13
- package/package.json +17 -4
- package/.vscode/extensions.json +0 -3
- package/dist/favicon.ico +0 -0
package/README.md
CHANGED
|
@@ -1,149 +1,145 @@
|
|
|
1
|
-
#
|
|
2
|
-
本项目作为当前仓库的vue3构建版本，会跟随vue2版本持续更新，敬请期待，欢迎提交issue和交流技术。
|
|
1
|
+
# Flyfish Viewer
|
|
3
2
|
|
|
4
|
-
|
|
3
|
+
把 Word、Excel、PPT、PDF 和图片稳稳带进浏览器里。
|
|
5
4
|
|
|
6
|
-
|
|
5
|
+
`@flyfish-group/file-viewer3` 是一款基于 Vue 3、TypeScript 和 Vite 构建的纯前端文件预览组件。它不依赖后端转码服务，适合接入 OA、知识库、附件中心、流程系统和需要离线能力的业务场景。这个项目的目标很直接: 让文档预览不再像临时拼出来的功能，而是像一个可以放心交付的产品模块。
|
|
7
6
|
|
|
8
|
-
|
|
9
|
-
|
|
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
|
+
- 仓库: [git.flyfish.dev/flyfish-group/file-viewer](https://git.flyfish.dev/flyfish-group/file-viewer)
|
|
10
11
|
|
|
11
|
-
|
|
12
|
+
|
|
12
13
|
|
|
14
|
+
## 为什么值得接入
|
|
13
15
|
|
|
16
|
+
- 纯前端渲染。文档解析和展示全部在浏览器内完成，部署简单，不依赖 Office 服务端或额外转码链路。
|
|
17
|
+
- 多格式覆盖。当前内置 36 个扩展名映射，覆盖 Word、Excel、PowerPoint、PDF、Markdown、图片、文本/代码和 MP4，能覆盖绝大多数常见附件场景。
|
|
18
|
+
- 接入方式灵活。既支持在 Vue 3 项目里直接作为组件使用，也支持作为独立页面通过 iframe 嵌入到任意系统。
|
|
19
|
+
- `.doc` 体验更像 Word。当前版本使用 `msdoc-viewer` 解析 `.doc`，并提供灰色工作台、白色纸张、页面居中的阅读体验。
|
|
20
|
+
- 适合业务交付。父容器自适应、URL 与二进制双输入、静态站点可部署，便于在真实项目里落地。
|
|
14
21
|
|
|
15
|
-
|
|
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组件依赖父节点进行布局，自动填满
|
|
22
|
+
## 支持格式
|
|
25
23
|
|
|
24
|
+
当前版本内置 36 个扩展名映射，覆盖 8 大类文件。
|
|
26
25
|
|
|
26
|
+
| 类别 | 扩展名 | 当前表现 | 适合场景 |
|
|
27
|
+
| --- | --- | --- | --- |
|
|
28
|
+
| Word | `docx` | `docx-preview`，更适合保留文档结构和版式 | 新生成的 Word 文档、正式文档 |
|
|
29
|
+
| Word | `doc` | `msdoc-viewer` + Word 风格页面容器 | 历史 `.doc` 老文档 |
|
|
30
|
+
| Excel | `xlsx` | 样式还原相对更完整 | 需要保留表格结构和样式的业务 |
|
|
31
|
+
| Excel 兼容格式 | `xlsm`、`xlsb`、`xls`、`csv`、`ods`、`fods`、`numbers` | 兼容优先，样式弱于 `xlsx` | 老表格、轻量数据查看 |
|
|
32
|
+
| PowerPoint | `pptx` | 浏览幻灯片内容 | 汇报材料、课件、方案 |
|
|
33
|
+
| PDF | `pdf` | 基于 `pdfjs-dist` 预览，版式稳定 | 合同、票据、版式成品 |
|
|
34
|
+
| Markdown | `md`、`markdown` | Markdown 阅读样式 | README、知识文档、说明文档 |
|
|
35
|
+
| 图片 | `gif`、`jpg`、`jpeg`、`bmp`、`tiff`、`tif`、`png`、`svg`、`webp` | 原生图片浏览 | 图片附件、设计稿、Logo |
|
|
36
|
+
| 文本/代码 | `txt`、`json`、`js`、`css`、`java`、`py`、`html`、`jsx`、`ts`、`tsx`、`xml`、`log` | 按纯文本显示内容 | 日志、配置、代码片段 |
|
|
37
|
+
| 视频 | `mp4` | 浏览器原生视频播放 | 演示视频、录屏 |
|
|
27
38
|
|
|
28
|
-
##
|
|
39
|
+
## 两条接入路线
|
|
29
40
|
|
|
30
|
-
### 1.
|
|
41
|
+
### 1. Vue 3 组件集成
|
|
31
42
|
|
|
32
|
-
|
|
33
|
-
npm install
|
|
34
|
-
```
|
|
43
|
+
适合已经在 Vue 3 项目里开发，希望最短路径完成接入的团队。
|
|
35
44
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
npm run dev
|
|
45
|
+
```bash
|
|
46
|
+
pnpm add @flyfish-group/file-viewer3
|
|
39
47
|
```
|
|
40
48
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
49
|
+
```ts
|
|
50
|
+
import { createApp } from 'vue'
|
|
51
|
+
import App from './App.vue'
|
|
52
|
+
import FileViewer from '@flyfish-group/file-viewer3'
|
|
45
53
|
|
|
46
|
-
|
|
54
|
+
createApp(App).use(FileViewer).mount('#app')
|
|
47
55
|
```
|
|
48
|
-
npm run lint
|
|
49
|
-
```
|
|
50
|
-
|
|
51
56
|
|
|
57
|
+
```vue
|
|
58
|
+
<script setup lang="ts">
|
|
59
|
+
import { ref } from 'vue'
|
|
52
60
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
### 1. 项目引用集成
|
|
56
|
-
|
|
57
|
-
> Tips: 本集成方式将会全量引入本项目的所有代码和依赖，所以可能会在您的项目中产生依赖版本冲突，请注意甄别。如果发生很多的依赖冲突，建议立即更换iframe集成方式，更轻量级，且日后能够无缝升级。
|
|
58
|
-
|
|
59
|
-
如果您使用了flyfish的私库，请使用以下命令安装依赖即可。
|
|
61
|
+
const url = ref('https://example.com/demo.pdf')
|
|
62
|
+
</script>
|
|
60
63
|
|
|
61
|
-
|
|
62
|
-
|
|
64
|
+
<template>
|
|
65
|
+
<div style="height: 100vh">
|
|
66
|
+
<file-viewer :url="url" />
|
|
67
|
+
</div>
|
|
68
|
+
</template>
|
|
63
69
|
```
|
|
64
70
|
|
|
65
|
-
|
|
71
|
+
### 2. Iframe 嵌入
|
|
66
72
|
|
|
67
|
-
|
|
68
|
-
|
|
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'
|
|
75
|
-
|
|
76
|
-
createApp(App).use(FileViewer)
|
|
77
|
-
.mount('#app')
|
|
73
|
+
适合多系统共用一套预览器、想把预览能力独立部署、或者不希望把解析依赖带进业务包的场景。
|
|
78
74
|
|
|
75
|
+
```html
|
|
76
|
+
<iframe
|
|
77
|
+
id="viewer"
|
|
78
|
+
src="https://viewer.flyfish.dev?url=https%3A%2F%2Fexample.com%2Fdemo.docx"
|
|
79
|
+
style="width: 100%; height: 100%; border: 0"
|
|
80
|
+
></iframe>
|
|
79
81
|
```
|
|
80
82
|
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
注意：您需要自己定义好预览器的父元素，预览器默认会占满父元素。
|
|
83
|
+
更完整的二进制推送方案、`from` 安全校验和宿主页面示例，请查看文档站中的 [Iframe 嵌入说明](https://doc.flyfish.dev/guide/iframe)。
|
|
84
84
|
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
```html
|
|
88
|
-
<script setup lang='ts'>
|
|
89
|
-
import { onMounted, ref } from 'vue'
|
|
85
|
+
## 使用说明
|
|
90
86
|
|
|
91
|
-
|
|
87
|
+
- 组件支持两条主要输入路径: `url?: string` 与 `file?: File`
|
|
88
|
+
- 当 `file` 和 `url` 同时存在时，会优先渲染 `file`
|
|
89
|
+
- 如果业务侧拿到的是 `Blob` 或 `ArrayBuffer`，推荐先包装成带扩展名的 `File`
|
|
90
|
+
- 预览器会填满父容器，请为父容器提供稳定高度
|
|
91
|
+
- 使用 `url` 预览时，目标资源需要允许浏览器访问；跨域场景下需要正确配置 CORS
|
|
92
|
+
- 如果下载地址本身没有明确扩展名，建议先在业务侧取回文件，再包装成 `File`
|
|
92
93
|
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
})
|
|
96
|
-
|
|
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>
|
|
94
|
+
```ts
|
|
95
|
+
const blob = await response.blob()
|
|
96
|
+
const file = new File([blob], 'contract.pdf', { type: blob.type })
|
|
97
|
+
```
|
|
108
98
|
|
|
99
|
+
## 本地开发
|
|
109
100
|
|
|
101
|
+
```bash
|
|
102
|
+
pnpm install
|
|
103
|
+
pnpm dev
|
|
110
104
|
```
|
|
111
105
|
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
### 2. 使用iframe集成（推荐）
|
|
106
|
+
常用脚本:
|
|
115
107
|
|
|
116
|
-
|
|
108
|
+
- `pnpm build`: 构建示例站点
|
|
109
|
+
- `pnpm build-lib`: 构建组件库产物
|
|
110
|
+
- `pnpm docs:dev`: 启动 VitePress 文档站
|
|
111
|
+
- `pnpm docs:build`: 构建文档站
|
|
112
|
+
- `pnpm type-check`: 执行 TypeScript 类型检查
|
|
117
113
|
|
|
118
|
-
|
|
114
|
+
## 打包发布
|
|
119
115
|
|
|
120
|
-
|
|
121
|
-
2. 打开`example`文件夹中的`embedded.html`，修改目标地址为本地调试地址
|
|
116
|
+
建议在发布前执行下面这组命令:
|
|
122
117
|
|
|
123
|
-
```
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
// 文件url
|
|
130
|
-
url: './word.docx'
|
|
131
|
-
};
|
|
118
|
+
```bash
|
|
119
|
+
pnpm type-check
|
|
120
|
+
pnpm build
|
|
121
|
+
pnpm build-lib
|
|
122
|
+
pnpm docs:build
|
|
123
|
+
npm pack
|
|
132
124
|
```
|
|
133
125
|
|
|
134
|
-
|
|
135
|
-
4. 具体请参考demo代码，原理是基于`iframe`跨域通信机制。
|
|
126
|
+
其中:
|
|
136
127
|
|
|
137
|
-
|
|
128
|
+
- `dist/` 是应用与库构建产物
|
|
129
|
+
- `docs/.vitepress/dist/` 是文档站静态产物
|
|
130
|
+
- `npm pack` 会生成可直接发布或分发的 npm 包 tarball
|
|
138
131
|
|
|
132
|
+
## 文档导航
|
|
139
133
|
|
|
134
|
+
- [文档导览](https://doc.flyfish.dev/guide/)
|
|
135
|
+
- [快速开始](https://doc.flyfish.dev/guide/quickstart)
|
|
136
|
+
- [Demo 说明](https://doc.flyfish.dev/guide/demo)
|
|
137
|
+
- [组件用法](https://doc.flyfish.dev/guide/usage)
|
|
138
|
+
- [支持格式](https://doc.flyfish.dev/guide/formats)
|
|
139
|
+
- [本地开发与打包](https://doc.flyfish.dev/guide/development)
|
|
140
140
|
|
|
141
|
-
##
|
|
142
|
-
#### [feature]`v1.0.7` `2022年4月24日`
|
|
143
|
-
1. 修复基于依赖的项目，无法预览pdf的问题
|
|
141
|
+
## 开源说明
|
|
144
142
|
|
|
145
|
-
|
|
143
|
+
本项目使用 `Apache-2.0` 许可证。
|
|
146
144
|
|
|
147
|
-
|
|
148
|
-
2. 增加pdf预览初始缩放大小，自动适配页面。调整pdf预览缩放下限为0.5
|
|
149
|
-
3. demo增加url预览模式，在请求参数中添加`url=文件地址`，可自动拉取并渲染文件
|
|
145
|
+
如果这个项目帮你节省了时间、少走了弯路，欢迎提 issue、提 PR，或者把它分享给也在做文档预览的人。开源世界最动人的地方，往往不是“某个功能终于能用了”，而是大家一起把它打磨到了真的能放心交付。
|