@aggbond/my-file-preview-mobile 1.0.1 → 1.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 +271 -0
- package/dist/ReadFilePopupMobile.es.min.js +1 -1
- package/dist/ReadFilePopupMobile.umd.min.js +1 -1
- package/package.json +1 -1
- package/src/ReadFilePopupMobile.js +728 -728
- package/src/ReadFilePopupMobile.ts +783 -783
package/README.md
ADDED
|
@@ -0,0 +1,271 @@
|
|
|
1
|
+
# ReadFilePopupMobile.js 组件文档
|
|
2
|
+
|
|
3
|
+
## 概述
|
|
4
|
+
|
|
5
|
+
[ReadFilePopupMobile.js](file://d:\Desktop\组件\CoerceReadPopup\src\ReadFilePopupMobile.js) 是一个移动端文件预览组件，支持多种文件类型的展示，包括 PDF、富文本和引用文本。该组件提供了文件列表渲染、强制阅读弹窗、文件点击预览等功能。
|
|
6
|
+
|
|
7
|
+
## 功能特性
|
|
8
|
+
|
|
9
|
+
- 📄 支持多种文件类型预览（PDF、富文本、引用文本）
|
|
10
|
+
- ✅ 强制阅读弹窗功能
|
|
11
|
+
- 📋 文件列表自动渲染
|
|
12
|
+
- 🔧 灵活的配置选项
|
|
13
|
+
- 🎨 自定义样式支持
|
|
14
|
+
|
|
15
|
+
## 使用方法
|
|
16
|
+
|
|
17
|
+
### ES6 Import 方式
|
|
18
|
+
```js
|
|
19
|
+
import FilePreview from '@aggbond/my-file-preview-mobile';
|
|
20
|
+
|
|
21
|
+
const filePreview = new FilePreview({
|
|
22
|
+
isDrawFileList: true,
|
|
23
|
+
listObj: {
|
|
24
|
+
listId: '#readBox',
|
|
25
|
+
fileList: [
|
|
26
|
+
{
|
|
27
|
+
name: "《用户服务协议》",
|
|
28
|
+
file_type: 1,
|
|
29
|
+
content_text: "<h2>用户服务协议</h2><p>欢迎使用我们的服务...</p>"
|
|
30
|
+
}
|
|
31
|
+
]
|
|
32
|
+
}
|
|
33
|
+
});
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
### 浏览器直接引入
|
|
37
|
+
```js
|
|
38
|
+
<script src="https://unpkg.com/@yourname/file-preview-plugin@latest/dist/ReadFilePopupMobile.js"></script>
|
|
39
|
+
<script>
|
|
40
|
+
const filePreview = new window.FilePreview({
|
|
41
|
+
// configuration
|
|
42
|
+
});
|
|
43
|
+
</script>
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
## 配置选项
|
|
47
|
+
|
|
48
|
+
### 基础选项
|
|
49
|
+
|
|
50
|
+
| 参数 | 类型 | 默认值 | 描述 |
|
|
51
|
+
|------|------|--------|------|
|
|
52
|
+
| basePath | string | "/assets/pdfs/" | 文件基础路径 |
|
|
53
|
+
| modalId | string | "filePreviewModal" | 模态框ID |
|
|
54
|
+
| contentId | string | "filePreviewContent" | 内容容器ID |
|
|
55
|
+
| closeBtnId | string | "filePreviewCloseBtn" | 关闭按钮ID |
|
|
56
|
+
| isConfignFileKeyName | boolean | false | 是否需要转换文件key |
|
|
57
|
+
| isDrawFileList | boolean | false | 是否需要绘制阅读文件列表 |
|
|
58
|
+
| isBindFileClick | boolean | false | 是否需要绑定文件点击事件 |
|
|
59
|
+
|
|
60
|
+
|
|
61
|
+
### 文件类型配置
|
|
62
|
+
|
|
63
|
+
```js
|
|
64
|
+
fileTypes: {
|
|
65
|
+
pdf: "application/pdf",
|
|
66
|
+
txt: "text/plain",
|
|
67
|
+
html: "text/html",
|
|
68
|
+
1: "richTextFile", // 富文本
|
|
69
|
+
2: "choosePdfFile", // PDF文件
|
|
70
|
+
3: "quotePdfFile" // 引用文本
|
|
71
|
+
}
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
### 文件键名映射配置
|
|
75
|
+
|
|
76
|
+
```js
|
|
77
|
+
// 动态更改相关key值
|
|
78
|
+
fileKeyNameConfign: {
|
|
79
|
+
fileTitle: "name", // 标题字段
|
|
80
|
+
fileType: "doc_type", // 文件类型字段
|
|
81
|
+
filePdfUrl: "pdf_url", // PDF地址字段
|
|
82
|
+
fileRichContent: "content_text", // 富文本内容字段
|
|
83
|
+
fileArr: "com_terms" // 文件数组字段
|
|
84
|
+
}
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
### 文件列表配置(listObj)
|
|
88
|
+
```js
|
|
89
|
+
listObj: {
|
|
90
|
+
listId: "", // 列表容器ID
|
|
91
|
+
fileList: [], // 文件列表数据
|
|
92
|
+
fileStyle: {}, // 文件样式
|
|
93
|
+
isCheckButton: false, // 是否显示复选框
|
|
94
|
+
isCoerceReadPopup: true, // 是否强制阅读弹窗
|
|
95
|
+
checkCallBack: ()=>{}, // 复选框状态变更回调
|
|
96
|
+
listText: "更多详情请阅读"
|
|
97
|
+
}
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
| 参数 | 类型 | 默认值 | 描述 |
|
|
101
|
+
|------|------|--------|------|
|
|
102
|
+
| listId | string | "" | 列表容器ID |
|
|
103
|
+
| fileList | Array | [] | 文件列表 |
|
|
104
|
+
| fileStyle | Object | {color: "red", "font-weight": "bold"} | 文件样式 |
|
|
105
|
+
| isCheckButton | boolean | false | 是否需要复选框 |
|
|
106
|
+
| isCoerceReadPopup | boolean | true | 是否强制阅读弹窗 |
|
|
107
|
+
| checkCallBack | Function | (isChecked) => {} | 复选框回调函数 |
|
|
108
|
+
| listText | string | "更多详情请阅读" | 列表文本 |
|
|
109
|
+
| checkButtonID | string | "ReadFileCheckBox" | 复选框ID |
|
|
110
|
+
|
|
111
|
+
### 强制阅读配置(coerceReadList)
|
|
112
|
+
```js
|
|
113
|
+
coerceReadList: {
|
|
114
|
+
titleText: "请阅读并同意以下文件",
|
|
115
|
+
fileList: [], // 强制阅读文件列表
|
|
116
|
+
btnArr: ["确认已阅读并同意", "拒绝"],
|
|
117
|
+
btnStyle: [{}, {}], // 按钮样式
|
|
118
|
+
coerceCallBack: [fn1, fn2] // 按钮点击回调
|
|
119
|
+
}
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
| 参数 | 类型 | 默认值 | 描述 |
|
|
123
|
+
|------|------|--------|------|
|
|
124
|
+
| titleText | string | "请阅读并同意以下文件" | 弹窗标题 |
|
|
125
|
+
| fileList | Array | [] | 文件列表 |
|
|
126
|
+
| fileStyle | Object | {color: "red", "font-weight": "bold"} | 文件样式 |
|
|
127
|
+
| btnArr | Array | ["确认已阅读并同意", "拒绝"] | 按钮数组 |
|
|
128
|
+
| btnStyle | Array | [{ color: "red" }, { color: "gray" }] | 按钮样式 |
|
|
129
|
+
| btnBoxStyle | Object | {} | 按钮容器样式 |
|
|
130
|
+
| showProgressInButton | boolean/number | false | 是否在按钮上显示进度 |
|
|
131
|
+
| coerceCallBack | Array/Function | [callback1, callback2] | 按钮回调函数,return false 则不关闭弹窗 |
|
|
132
|
+
|
|
133
|
+
按钮进度显示
|
|
134
|
+
- showProgressInButton: true - 在btnArr[0]上显示进度
|
|
135
|
+
- showProgressInButton: 0 - 在btnArr[0]上显示进度
|
|
136
|
+
- showProgressInButton: 1 - 在btnArr[1]上显示进度
|
|
137
|
+
- showProgressInButton: n - 在btnArr[n]上显示进度
|
|
138
|
+
- showProgressInButton: false - 不显示进度
|
|
139
|
+
|
|
140
|
+
## 使用实例
|
|
141
|
+
|
|
142
|
+
### 基本文件列表
|
|
143
|
+
```html
|
|
144
|
+
<div id="readBox"></div>
|
|
145
|
+
```
|
|
146
|
+
```js
|
|
147
|
+
const filePreview = new FilePreview({
|
|
148
|
+
isDrawFileList: true,
|
|
149
|
+
listObj: {
|
|
150
|
+
listId: '#readBox',
|
|
151
|
+
fileList: [
|
|
152
|
+
{
|
|
153
|
+
name: "《用户服务协议》",
|
|
154
|
+
file_type: 1,
|
|
155
|
+
content_text: "<h2>用户服务协议</h2><p>欢迎使用我们的服务...</p>"
|
|
156
|
+
}
|
|
157
|
+
],
|
|
158
|
+
isCheckButton: true,
|
|
159
|
+
checkCallBack: (isChecked) => {
|
|
160
|
+
console.log('复选框状态改变：', isChecked);
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
});
|
|
164
|
+
```
|
|
165
|
+
|
|
166
|
+
### 强制阅读弹窗
|
|
167
|
+
|
|
168
|
+
```js
|
|
169
|
+
const filePreview = new FilePreview({
|
|
170
|
+
coerceReadList: {
|
|
171
|
+
fileList: [
|
|
172
|
+
{
|
|
173
|
+
name: "《测试文档》",
|
|
174
|
+
file_type: 1,
|
|
175
|
+
content_text: "<p>这是第一个测试文档的内容...</p>"
|
|
176
|
+
}
|
|
177
|
+
],
|
|
178
|
+
btnArr: ['同意并继续', '拒绝'],
|
|
179
|
+
showProgressInButton: true, // 显示进度
|
|
180
|
+
coerceCallBack: (control, buttonIndex) => {
|
|
181
|
+
switch (buttonIndex) {
|
|
182
|
+
case 0: // 同意
|
|
183
|
+
if (control.isLastFile()) {
|
|
184
|
+
control.setCheckboxChecked(true);
|
|
185
|
+
alert('已完成所有文件阅读！');
|
|
186
|
+
} else {
|
|
187
|
+
control.next(); // 下一个文件
|
|
188
|
+
// return false 则不会关闭弹窗
|
|
189
|
+
// return true 返回非false则会关闭弹窗。默认关闭弹窗
|
|
190
|
+
}
|
|
191
|
+
break;
|
|
192
|
+
case 1: // 拒绝
|
|
193
|
+
// control.close(); // 关闭弹窗
|
|
194
|
+
// return false 则不会关闭弹窗
|
|
195
|
+
// return true 返回非false则会关闭弹窗。默认关闭弹窗
|
|
196
|
+
break;
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
}
|
|
200
|
+
});
|
|
201
|
+
```
|
|
202
|
+
#### 控制对象方法
|
|
203
|
+
在回调函数中可以使用 control 对象的方法：
|
|
204
|
+
方法 描述
|
|
205
|
+
control.next() 下一个文件
|
|
206
|
+
control.prev() 上一个文件
|
|
207
|
+
control.close() 关闭弹窗
|
|
208
|
+
control.getCurrentIndex() 获取当前索引
|
|
209
|
+
control.getFileList() 获取文件列表
|
|
210
|
+
control.isLastFile() 是否为最后一个文件
|
|
211
|
+
control.setButtonTitles(titles) 设置按钮标题
|
|
212
|
+
control.getVisitedIndices() 获取已访问的索引
|
|
213
|
+
control.goTo(index) 跳转到指定索引
|
|
214
|
+
control.setCheckboxChecked(checked) 设置复选框状态
|
|
215
|
+
control.isCheckboxChecked() 获取复选框状态
|
|
216
|
+
|
|
217
|
+
### 文件预览
|
|
218
|
+
|
|
219
|
+
```js
|
|
220
|
+
// 预览单个文件
|
|
221
|
+
filePreview.loadFile('/path/to/file.pdf');
|
|
222
|
+
filePreview.loadFile('/path/to/file.txt');
|
|
223
|
+
```
|
|
224
|
+
|
|
225
|
+
### 文件类型支持
|
|
226
|
+
|
|
227
|
+
- 富文本 (file_type: 1): 直接在弹窗中显示 HTML 内容
|
|
228
|
+
- PDF (file_type: 2): 使用 iframe 预览 PDF 文件
|
|
229
|
+
- 引用文本 (file_type: 3): 包含多个子文件的复合文档
|
|
230
|
+
|
|
231
|
+
## 核心方法
|
|
232
|
+
drawReadFileList(listObj)
|
|
233
|
+
渲染阅读文件列表
|
|
234
|
+
|
|
235
|
+
openCoerceReadPopup()
|
|
236
|
+
打开强制阅读弹窗
|
|
237
|
+
|
|
238
|
+
bindFileClick(containerSelector, fileArr)
|
|
239
|
+
绑定文件点击事件
|
|
240
|
+
|
|
241
|
+
judgeFileType(options)
|
|
242
|
+
判断文件类型并返回相应处理结果
|
|
243
|
+
|
|
244
|
+
## 文件类型说明
|
|
245
|
+
|
|
246
|
+
- 富文本文件 (type 1)
|
|
247
|
+
|
|
248
|
+
- 直接显示 HTML 内容
|
|
249
|
+
- 适用于条款、协议等文本内容
|
|
250
|
+
- PDF文件 (type 2)
|
|
251
|
+
|
|
252
|
+
- 使用 iframe/embed/object 显示 PDF
|
|
253
|
+
- 支持工具栏控制
|
|
254
|
+
- 引用文本文件 (type 3)
|
|
255
|
+
|
|
256
|
+
## 注意事项
|
|
257
|
+
- 使用前需确保引入 @aggbond/my-popup 组件库
|
|
258
|
+
- PDF 文件预览依赖浏览器的 PDF 查看能力
|
|
259
|
+
- 对于跨域 PDF 文件，可能需要服务器端配合解决 CORS 问题
|
|
260
|
+
- 文件路径需要正确配置
|
|
261
|
+
- 对于 HTML 文件预览需要注意 XSS 安全问题
|
|
262
|
+
- 按钮进度显示功能支持在任意按钮上显示进度信息
|
|
263
|
+
|
|
264
|
+
## 贡献指南
|
|
265
|
+
欢迎提交 Issue 和 Pull Request 来改进这个项目。
|
|
266
|
+
|
|
267
|
+
## 许可协议
|
|
268
|
+
MIT
|
|
269
|
+
|
|
270
|
+
|
|
271
|
+
|