@work-zhanguo/light-file-preview 0.0.1 → 0.0.2
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 +131 -87
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,122 +1,166 @@
|
|
|
1
1
|
# @work-zhanguo/light-file-preview
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Gitee: [https://gitee.com/hou_zhan_guo/light-file-preview](https://gitee.com/hou_zhan_guo/light-file-preview)
|
|
4
|
+
|
|
5
|
+
## 项目简介
|
|
6
|
+
|
|
7
|
+
用于业务系统里的附件预览，支持传入文件路径、远程地址和本地文件，接入方式尽量保持简单。
|
|
8
|
+
|
|
9
|
+
## 支持文件
|
|
10
|
+
|
|
11
|
+
支持类型：
|
|
12
|
+
|
|
13
|
+
- `PNG`
|
|
14
|
+
- `JPG`
|
|
15
|
+
- `JPEG`
|
|
16
|
+
- `GIF`
|
|
17
|
+
- `WEBP`
|
|
18
|
+
- `PDF`
|
|
19
|
+
- `TXT`
|
|
20
|
+
- `JSON`
|
|
21
|
+
- `JS`
|
|
22
|
+
- `HTML`
|
|
23
|
+
- `CSS`
|
|
24
|
+
- `MD`
|
|
25
|
+
- `DOCX`
|
|
26
|
+
- `XLS`
|
|
27
|
+
- `XLSX`
|
|
28
|
+
- `CSV`
|
|
29
|
+
- `MP4`
|
|
30
|
+
- `WEBM`
|
|
31
|
+
- `MP3`
|
|
32
|
+
- `WAV`
|
|
33
|
+
|
|
34
|
+
补充说明：
|
|
35
|
+
|
|
36
|
+
- 支持远程 `URL`、本地 `File`、`Blob`
|
|
37
|
+
- 支持新页面预览和弹窗预览
|
|
38
|
+
- 不支持的格式不强行预览，统一保留下载入口
|
|
39
|
+
|
|
40
|
+
## 项目依赖
|
|
41
|
+
|
|
42
|
+
- [pdf.js](https://github.com/mozilla/pdf.js)
|
|
43
|
+
- [docx-preview](https://github.com/VolodymyrBaydalka/docxjs)
|
|
44
|
+
- [SheetJS](https://github.com/SheetJS/sheetjs)
|
|
45
|
+
- [marked](https://github.com/markedjs/marked)
|
|
46
|
+
- [DOMPurify](https://github.com/cure53/DOMPurify)
|
|
47
|
+
|
|
48
|
+
## 远程地址预览
|
|
49
|
+
|
|
50
|
+
通过 `window.open` 传入网络地址，直接打开新页面预览。建议同时传 `name`，这样扩展名识别更稳定。
|
|
51
|
+
|
|
52
|
+
```js
|
|
53
|
+
const remoteUrl = 'https://example.com/files/test.docx';
|
|
54
|
+
const previewUrl =
|
|
55
|
+
'/?preview=1&src=' +
|
|
56
|
+
encodeURIComponent(remoteUrl) +
|
|
57
|
+
'&name=' +
|
|
58
|
+
encodeURIComponent('test.docx');
|
|
59
|
+
|
|
60
|
+
window.open(previewUrl, '_blank');
|
|
61
|
+
```
|
|
4
62
|
|
|
5
|
-
##
|
|
63
|
+
## 原生项目集成
|
|
6
64
|
|
|
7
|
-
|
|
8
|
-
- 支持弹窗模式嵌入，也支持独立 IIFE 产物挂载到任意 HTML 节点
|
|
9
|
-
- 支持统一下载，无法在线预览的格式仍可下载
|
|
10
|
-
- PDF 使用 `pdf.js`，DOCX 使用 `docx-preview`，表格使用 `SheetJS`
|
|
11
|
-
- 文本、代码、JSON、Markdown 采用按需读取与加载过渡，兼顾等待体验
|
|
12
|
-
- 支持中文路径自动编码处理，降低路径拼接集成成本
|
|
65
|
+
非 Vue 项目可以直接使用 standalone 产物。
|
|
13
66
|
|
|
14
|
-
|
|
67
|
+
```html
|
|
68
|
+
<link rel="stylesheet" href="/vendor/light-file-preview/style.css" />
|
|
69
|
+
<div id="preview-root"></div>
|
|
70
|
+
<script src="/vendor/light-file-preview/light-file-preview.iife.js"></script>
|
|
71
|
+
<script>
|
|
72
|
+
window.LightFilePreview.mount('#preview-root', {
|
|
73
|
+
source: '/uploads/report.xlsx'
|
|
74
|
+
});
|
|
75
|
+
</script>
|
|
76
|
+
```
|
|
15
77
|
|
|
16
|
-
|
|
17
|
-
| --- | --- | --- |
|
|
18
|
-
| 图片 | `png/jpg/jpeg/gif/webp/bmp/svg` | 高保真原生预览 |
|
|
19
|
-
| PDF | `pdf` | `pdf.js` 高保真渲染 |
|
|
20
|
-
| 文本 | `txt/json/js/ts/jsx/tsx/html/css/md` | 文本或 Markdown 预览 |
|
|
21
|
-
| Word | `docx` | `docx-preview` 中高保真 |
|
|
22
|
-
| Excel | `xls/xlsx/csv` | `SheetJS` 数据高保真 |
|
|
23
|
-
| 视频 | `mp4/webm` | 原生播放器 |
|
|
24
|
-
| 音频 | `mp3/wav` | 原生播放器 |
|
|
25
|
-
| 其他 | `doc/ppt/pptx` 等 | 默认提示暂不支持预览，但支持下载 |
|
|
78
|
+
## Odoo 集成
|
|
26
79
|
|
|
27
|
-
|
|
80
|
+
Odoo 项目推荐走静态资源加 Owl 组件挂载。
|
|
28
81
|
|
|
29
|
-
```
|
|
30
|
-
|
|
31
|
-
```
|
|
82
|
+
```js
|
|
83
|
+
/** @odoo-module **/
|
|
32
84
|
|
|
33
|
-
|
|
85
|
+
import { Component, onMounted, useRef } from '@odoo/owl';
|
|
34
86
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
import LightFilePreview from '@work-zhanguo/light-file-preview';
|
|
39
|
-
import '@work-zhanguo/light-file-preview/style.css';
|
|
87
|
+
export class FilePreviewBlock extends Component {
|
|
88
|
+
setup() {
|
|
89
|
+
this.rootRef = useRef('root');
|
|
40
90
|
|
|
41
|
-
|
|
91
|
+
onMounted(() => {
|
|
92
|
+
window.LightFilePreview.mount(this.rootRef.el, {
|
|
93
|
+
source: this.props.source,
|
|
94
|
+
fileName: this.props.fileName || 'report.pdf'
|
|
95
|
+
});
|
|
96
|
+
});
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
FilePreviewBlock.template = 'your_module.FilePreviewBlock';
|
|
42
101
|
```
|
|
43
102
|
|
|
44
|
-
```
|
|
45
|
-
<
|
|
46
|
-
<
|
|
47
|
-
|
|
103
|
+
```xml
|
|
104
|
+
<templates xml:space="preserve">
|
|
105
|
+
<t t-name="your_module.FilePreviewBlock">
|
|
106
|
+
<div class="o_file_preview_root" t-ref="root" />
|
|
107
|
+
</t>
|
|
108
|
+
</templates>
|
|
48
109
|
```
|
|
49
110
|
|
|
50
|
-
##
|
|
111
|
+
## Vue2 集成
|
|
51
112
|
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
113
|
+
通过单独适配入口接入：
|
|
114
|
+
|
|
115
|
+
```js
|
|
116
|
+
import Vue from 'vue';
|
|
117
|
+
import LightFilePreview from '@work-zhanguo/light-file-preview/vue2';
|
|
55
118
|
import '@work-zhanguo/light-file-preview/style.css';
|
|
56
|
-
</script>
|
|
57
119
|
|
|
120
|
+
Vue.use(LightFilePreview);
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
```vue
|
|
58
124
|
<template>
|
|
59
|
-
<
|
|
125
|
+
<light-file-preview :source="fileUrl" />
|
|
60
126
|
</template>
|
|
61
127
|
```
|
|
62
128
|
|
|
63
|
-
##
|
|
129
|
+
## Vue3 集成
|
|
64
130
|
|
|
65
|
-
|
|
131
|
+
```ts
|
|
132
|
+
import { createApp } from 'vue';
|
|
133
|
+
import App from './App.vue';
|
|
134
|
+
import LightFilePreview from '@work-zhanguo/light-file-preview';
|
|
135
|
+
import '@work-zhanguo/light-file-preview/style.css';
|
|
66
136
|
|
|
67
|
-
|
|
68
|
-
<link rel="stylesheet" href="/vendor/light-file-preview/style.css" />
|
|
69
|
-
<div id="preview-root"></div>
|
|
70
|
-
<script src="/vendor/light-file-preview/light-file-preview.iife.js"></script>
|
|
71
|
-
<script>
|
|
72
|
-
window.LightFilePreview.mount('#preview-root', {
|
|
73
|
-
source: '/uploads/合同.pdf'
|
|
74
|
-
});
|
|
75
|
-
</script>
|
|
137
|
+
createApp(App).use(LightFilePreview).mount('#app');
|
|
76
138
|
```
|
|
77
139
|
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
window.LightFilePreview.openDialog({
|
|
83
|
-
source: '/uploads/报表.xlsx'
|
|
84
|
-
});
|
|
85
|
-
</script>
|
|
140
|
+
```vue
|
|
141
|
+
<template>
|
|
142
|
+
<LightFilePreview source="/files/demo.pdf" />
|
|
143
|
+
</template>
|
|
86
144
|
```
|
|
87
145
|
|
|
88
|
-
##
|
|
89
|
-
|
|
90
|
-
| 参数 | 类型 | 默认值 | 说明 |
|
|
91
|
-
| --- | --- | --- | --- |
|
|
92
|
-
| `source` | `string \| File \| Blob` | - | 文件路径或二进制对象 |
|
|
93
|
-
| `fileName` | `string` | - | 自定义文件名 |
|
|
94
|
-
| `mode` | `'inline' \| 'dialog'` | `inline` | 预览模式 |
|
|
95
|
-
| `visible` | `boolean` | `true` | 弹窗是否显示 |
|
|
96
|
-
| `loadingText` | `string` | `文件加载中...` | 加载提示 |
|
|
97
|
-
| `textEncoding` | `string` | `utf-8` | 文本解码编码 |
|
|
98
|
-
| `maxTextBytes` | `number` | `2097152` | 文本最多读取字节数 |
|
|
99
|
-
| `maxSheetRows` | `number` | `200` | 表格最多展示行数 |
|
|
100
|
-
| `maxSheetCols` | `number` | `50` | 表格最多展示列数 |
|
|
101
|
-
| `pdfScale` | `number` | `1.35` | PDF 渲染缩放 |
|
|
102
|
-
| `showToolbar` | `boolean` | `true` | 是否显示工具栏 |
|
|
103
|
-
|
|
104
|
-
## 集成说明
|
|
146
|
+
## 部署说明
|
|
105
147
|
|
|
106
|
-
|
|
107
|
-
- 组件会在 `File/Blob` 场景自动创建并释放 `Object URL`
|
|
108
|
-
- 大文件文本预览默认只截取前 2MB，避免阻塞页面
|
|
109
|
-
- `.html` 默认按文本展示，不直接执行内容，降低安全风险
|
|
110
|
-
|
|
111
|
-
## 开发
|
|
148
|
+
直接复制打包产物：
|
|
112
149
|
|
|
113
150
|
```bash
|
|
114
151
|
npm install
|
|
115
|
-
npm run
|
|
116
|
-
```
|
|
152
|
+
npm run build
|
|
117
153
|
|
|
118
|
-
|
|
154
|
+
# 组件库产物
|
|
155
|
+
dist/
|
|
119
156
|
|
|
120
|
-
|
|
121
|
-
|
|
157
|
+
# 可复制到任意项目的独立产物
|
|
158
|
+
dist/standalone/
|
|
122
159
|
```
|
|
160
|
+
|
|
161
|
+
## 接入说明
|
|
162
|
+
|
|
163
|
+
- 本地上传文件只在当前浏览器中预览，不会保存到服务器
|
|
164
|
+
- 如果是远程文件预览，需要目标地址允许浏览器访问和跨域读取
|
|
165
|
+
- 弹窗预览会挂到 `body`
|
|
166
|
+
- 不支持的文件格式会保留下载入口
|