Industrial-image-management.../PREVIEW_FEATURE_GUIDE.md

89 lines
2.8 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# 商务数据库文件预览功能说明
## 功能概述
商务数据库信息模块的文件预览功能已经实现,支持多种文件类型的在线预览,为用户提供便捷的文件查看体验。
## 支持的文件类型
### 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. 支持文档的分页预览功能