183 lines
4.8 KiB
Markdown
183 lines
4.8 KiB
Markdown
# 🚀 出国登记PDF下载功能测试指南
|
||
|
||
## 📋 测试前准备
|
||
|
||
### 1. 确认环境
|
||
```bash
|
||
# 前端目录
|
||
cd /Users/weizzzz/Documents/Cursor/0828CURSOR/all-project/web
|
||
|
||
# 如果前端没有运行，启动前端
|
||
npm run dev
|
||
```
|
||
|
||
### 2. 确认依赖
|
||
依赖库已在 `package.json` 中配置：
|
||
- ✅ html2canvas: ^1.4.1
|
||
- ✅ jspdf: ^3.0.1
|
||
|
||
## 🧪 测试步骤
|
||
|
||
### 步骤1：访问出国登记管理页面
|
||
1. 打开浏览器访问：http://localhost
|
||
2. 登录系统（使用admin账号）
|
||
3. 导航至：**人事管理** -> **出国登记管理**
|
||
|
||
### 步骤2：进入登记历史选项卡
|
||
1. 在出国登记管理页面，点击**"登记历史"**选项卡
|
||
2. 确认列表中有数据（状态为"已通过"的记录）
|
||
3. 如果没有数据，需要先创建一些已通过的登记记录
|
||
|
||
### 步骤3：查看详情
|
||
1. 点击任意记录的**"查看详情"**按钮（眼睛图标）
|
||
2. 弹出"出国登记详情"对话框
|
||
3. 确认对话框显示完整的登记信息
|
||
|
||
### 步骤4：下载PDF
|
||
1. 在详情对话框底部，找到**"下载PDF"**按钮（蓝色按钮，带下载图标）
|
||
2. 点击**"下载PDF"**按钮
|
||
3. 观察系统提示：
|
||
- 出现"正在生成PDF，请稍候..."提示（约1-2秒）
|
||
- 然后出现"PDF下载成功"提示
|
||
4. 浏览器自动下载PDF文件到本地
|
||
|
||
### 步骤5：检查PDF文件
|
||
1. 在浏览器下载目录中找到下载的PDF文件
|
||
2. 文件命名格式：`出国登记表_姓名_时间戳.pdf`
|
||
3. 打开PDF文件，检查以下内容：
|
||
- ✅ 标题显示："登记报备人员因私事出国（境）登记表"
|
||
- ✅ 编号显示：登记ID
|
||
- ✅ 表格边框清晰
|
||
- ✅ 基本信息正确填充：
|
||
- 姓名、性别、出生日期
|
||
- 身份证号
|
||
- 政治面貌
|
||
- 户籍所在地
|
||
- 工作部门
|
||
- 职务职称
|
||
- 行政职级
|
||
- 人员类别代码
|
||
- ✅ 照片位置预留（显示"照片"占位文字）
|
||
- ✅ 盖章位置预留
|
||
- ✅ 联系人信息区域
|
||
- ✅ 填表说明显示
|
||
|
||
## ✅ 预期结果
|
||
|
||
### 1. 功能正常
|
||
- [x] 点击"下载PDF"按钮能触发下载
|
||
- [x] 显示"正在生成PDF"提示
|
||
- [x] 显示"PDF下载成功"提示
|
||
- [x] 浏览器自动下载文件
|
||
|
||
### 2. PDF格式正确
|
||
- [x] 文件是有效的PDF格式（能用PDF阅读器打开）
|
||
- [x] 页面尺寸为A4（210mm × 297mm）
|
||
- [x] 标题居中且加粗
|
||
- [x] 表格结构完整
|
||
- [x] 边框线清晰
|
||
|
||
### 3. 数据正确
|
||
- [x] 所有字段数据正确显示
|
||
- [x] 日期格式为"年 月 日"格式
|
||
- [x] 中文字符显示正常
|
||
- [x] 无乱码
|
||
|
||
### 4. 样式美观
|
||
- [x] 字体为宋体
|
||
- [x] 表格单元格对齐正确
|
||
- [x] 行间距合适
|
||
- [x] 整体布局美观
|
||
|
||
## 🐛 可能的问题及解决方案
|
||
|
||
### 问题1：点击按钮没有反应
|
||
**原因**：可能前端代码未更新或有语法错误
|
||
**解决**：
|
||
```bash
|
||
# 1. 检查浏览器控制台是否有错误
|
||
# 2. 刷新页面（Ctrl+Shift+R 强制刷新）
|
||
# 3. 重启前端服务
|
||
cd web
|
||
npm run dev
|
||
```
|
||
|
||
### 问题2：提示"PDF容器未找到"
|
||
**原因**：DOM渲染未完成
|
||
**解决**：
|
||
- 代码中已有 `await nextTick()` 和 100ms 延迟
|
||
- 如果仍有问题，可能需要增加延迟时间
|
||
|
||
### 问题3：PDF显示为空白
|
||
**原因**：数据绑定问题或CSS样式问题
|
||
**解决**：
|
||
- 检查 `viewData.value` 是否有数据
|
||
- 检查PDF容器的CSS样式是否正确
|
||
|
||
### 问题4：中文乱码
|
||
**原因**：字体问题
|
||
**解决**：
|
||
- 确认CSS中使用了 `font-family: 'SimSun', '宋体', serif`
|
||
- 确认浏览器支持中文字体
|
||
|
||
### 问题5：依赖库未安装
|
||
**原因**：html2canvas或jspdf未安装
|
||
**解决**：
|
||
```bash
|
||
cd web
|
||
npm install html2canvas@^1.4.1 jspdf@^3.0.1
|
||
```
|
||
|
||
## 📸 测试截图建议
|
||
|
||
建议截图以下内容作为测试证据：
|
||
1. **登记历史列表页面**
|
||
2. **查看详情弹窗**（显示"下载PDF"按钮）
|
||
3. **下载成功提示**
|
||
4. **下载的PDF文件**（在文件管理器中）
|
||
5. **打开的PDF内容**（完整表格）
|
||
|
||
## 🔍 调试提示
|
||
|
||
如果需要调试，可以查看浏览器控制台（F12）：
|
||
|
||
### 关键日志
|
||
```javascript
|
||
// PDF容器尺寸
|
||
PDF容器尺寸: { width: 794, height: xxx }
|
||
|
||
// Canvas尺寸
|
||
Canvas尺寸: { width: 1588, height: xxx }
|
||
|
||
// 如果有错误，会显示：
|
||
生成PDF失败: Error: ...
|
||
```
|
||
|
||
### 查看PDF容器内容
|
||
在点击"下载PDF"按钮后，PDF容器会短暂显示（虽然在屏幕外），可以在控制台中检查：
|
||
```javascript
|
||
// 在handleDownloadPDF函数的console.log后打断点
|
||
// 或临时修改容器样式为可见：
|
||
// style="position: fixed; left: 0; top: 0; ..."
|
||
```
|
||
|
||
## 📞 如有问题
|
||
|
||
如果测试过程中遇到任何问题：
|
||
1. 查看浏览器控制台错误信息
|
||
2. 查看网络请求是否正常
|
||
3. 确认数据是否完整
|
||
4. 检查代码是否有语法错误
|
||
|
||
---
|
||
|
||
## ✨ 测试完成后
|
||
|
||
测试通过后，可以：
|
||
1. 删除本测试指南文件
|
||
2. 删除实现说明文档
|
||
3. 正式使用该功能
|
||
|
||
**祝测试顺利！** 🎉
|
||
|