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

商务数据库文件预览功能说明

功能概述

商务数据库信息模块的文件预览功能已经实现，支持多种文件类型的在线预览，为用户提供便捷的文件查看体验。

支持的文件类型

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. 支持文档的分页预览功能