89 lines
2.8 KiB
Markdown
89 lines
2.8 KiB
Markdown
|
# 商务数据库文件预览功能说明
|
|||
|
|
|
|||
|
|
## 功能概述
|
|||
|
|
|
|||
|
|
商务数据库信息模块的文件预览功能已经实现，支持多种文件类型的在线预览，为用户提供便捷的文件查看体验。
|
|||
|
|
|
|||
|
|
## 支持的文件类型
|
|||
|
|
|
|||
|
|
### 1. 图片文件
|
|||
|
|
- **支持格式**: JPG, JPEG, PNG, GIF, BMP, WebP
|
|||
|
|
- **预览方式**: 在模态窗口中直接显示图片
|
|||
|
|
- **特性**:
|
|||
|
|
- 自适应大小，最大高度为70vh
|
|||
|
|
- 圆角和阴影效果提升视觉体验
|
|||
|
|
- 显示文件名信息
|
|||
|
|
|
|||
|
|
### 2. PDF文件
|
|||
|
|
- **支持格式**: PDF
|
|||
|
|
- **预览方式**: 在新窗口中打开PDF文件
|
|||
|
|
- **特性**: 利用浏览器原生PDF查看器
|
|||
|
|
|
|||
|
|
### 3. 文本文件
|
|||
|
|
- **支持格式**: TXT, MD, JSON, XML, CSV
|
|||
|
|
- **预览方式**: 在模态窗口中显示文本内容
|
|||
|
|
- **特性**:
|
|||
|
|
- 等宽字体显示，保持格式
|
|||
|
|
- 400px高度的滚动区域
|
|||
|
|
- 保留原文本格式和换行
|
|||
|
|
|
|||
|
|
### 4. Office文档
|
|||
|
|
- **支持格式**: DOC, DOCX, XLS, XLSX, PPT, PPTX
|
|||
|
|
- **预览方式**: 提示用户下载查看
|
|||
|
|
- **说明**: 由于Office文档需要特殊渲染，建议下载后使用相应软件打开
|
|||
|
|
|
|||
|
|
### 5. 其他文件类型
|
|||
|
|
- **处理方式**: 询问用户是否下载查看
|
|||
|
|
- **说明**: 对于不支持在线预览的文件类型，系统会友好提示用户
|
|||
|
|
|
|||
|
|
## 功能特性
|
|||
|
|
|
|||
|
|
### 用户体验优化
|
|||
|
|
1. **加载提示**: 预览过程中显示"正在加载预览..."提示
|
|||
|
|
2. **错误处理**: 针对不同错误状态提供详细的错误信息
|
|||
|
|
3. **资源管理**: 自动清理预览使用的内存资源
|
|||
|
|
|
|||
|
|
### 错误处理机制
|
|||
|
|
- **404错误**: "文件不存在或已被删除"
|
|||
|
|
- **403错误**: "没有权限访问该文件"
|
|||
|
|
- **500错误**: "服务器内部错误，请稍后重试"
|
|||
|
|
- **网络错误**: "预览文件失败，请检查网络连接"
|
|||
|
|
|
|||
|
|
### 安全性
|
|||
|
|
- 使用Blob URL进行文件预览，确保安全性
|
|||
|
|
- 10秒后自动释放URL资源，防止内存泄漏
|
|||
|
|
|
|||
|
|
## 使用方法
|
|||
|
|
|
|||
|
|
1. 在文件列表中找到要预览的文件
|
|||
|
|
2. 点击文件行中的"眼睛"图标按钮
|
|||
|
|
3. 系统会根据文件类型自动选择合适的预览方式
|
|||
|
|
4. 对于不支持的文件类型，系统会提供下载选项
|
|||
|
|
|
|||
|
|
## 技术实现
|
|||
|
|
|
|||
|
|
### API接口
|
|||
|
|
- **接口地址**: `/businessData/file/preview`
|
|||
|
|
- **请求方式**: GET
|
|||
|
|
- **参数**: `fileId` (必需)
|
|||
|
|
- **响应类型**: Blob
|
|||
|
|
|
|||
|
|
### 核心函数
|
|||
|
|
- `handlePreview(file)`: 主预览函数
|
|||
|
|
- `showImagePreview(url, fileName)`: 图片预览组件
|
|||
|
|
- `showTextPreview(blob, fileName)`: 文本预览组件
|
|||
|
|
|
|||
|
|
## 注意事项
|
|||
|
|
|
|||
|
|
1. **文件大小限制**: 大文件可能需要较长加载时间
|
|||
|
|
2. **浏览器兼容性**: 确保浏览器支持Blob和URL.createObjectURL
|
|||
|
|
3. **网络要求**: 稳定的网络连接确保预览效果
|
|||
|
|
4. **权限控制**: 需要有相应的文件访问权限
|
|||
|
|
|
|||
|
|
## 后续优化建议
|
|||
|
|
|
|||
|
|
1. 添加文件预览缓存机制
|
|||
|
|
2. 支持更多文件格式的在线预览
|
|||
|
|
3. 添加图片预览的缩放和旋转功能
|
|||
|
|
4. 支持文档的分页预览功能
|