cykj/hzdyjs

0 Fork 0

Files

T

weizhong e79bf5a26c “编译修改”

2025-10-14 16:41:19 +08:00

4.8 KiB

Raw Blame History

🚀 出国登记PDF下载功能测试指南

📋 测试前准备

1. 确认环境

# 前端目录
cd /Users/weizzzz/Documents/Cursor/0828CURSOR/all-project/web

# 如果前端没有运行，启动前端
npm run dev

2. 确认依赖

依赖库已在 package.json 中配置：

✅ html2canvas: ^1.4.1
✅ jspdf: ^3.0.1

🧪 测试步骤

步骤1：访问出国登记管理页面

打开浏览器访问：http://localhost
登录系统（使用admin账号）
导航至：人事管理 -> 出国登记管理

步骤2：进入登记历史选项卡

在出国登记管理页面，点击**"登记历史"**选项卡
确认列表中有数据（状态为"已通过"的记录）
如果没有数据，需要先创建一些已通过的登记记录

步骤3：查看详情

点击任意记录的**"查看详情"**按钮（眼睛图标）
弹出"出国登记详情"对话框
确认对话框显示完整的登记信息

步骤4：下载PDF

在详情对话框底部，找到**"下载PDF"**按钮（蓝色按钮，带下载图标）
点击**"下载PDF"**按钮
观察系统提示：
- 出现"正在生成PDF，请稍候..."提示（约1-2秒）
- 然后出现"PDF下载成功"提示
浏览器自动下载PDF文件到本地

步骤5：检查PDF文件

在浏览器下载目录中找到下载的PDF文件
文件命名格式：出国登记表_姓名_时间戳.pdf
打开PDF文件，检查以下内容：
- ✅ 标题显示："登记报备人员因私事出国（境）登记表"
- ✅ 编号显示：登记ID
- ✅ 表格边框清晰
- ✅ 基本信息正确填充：
  - 姓名、性别、出生日期
  - 身份证号
  - 政治面貌
  - 户籍所在地
  - 工作部门
  - 职务职称
  - 行政职级
  - 人员类别代码
- ✅ 照片位置预留（显示"照片"占位文字）
- ✅ 盖章位置预留
- ✅ 联系人信息区域
- ✅ 填表说明显示

✅ 预期结果

1. 功能正常

点击"下载PDF"按钮能触发下载
显示"正在生成PDF"提示
显示"PDF下载成功"提示
浏览器自动下载文件

2. PDF格式正确

文件是有效的PDF格式（能用PDF阅读器打开）
页面尺寸为A4（210mm × 297mm）
标题居中且加粗
表格结构完整
边框线清晰

3. 数据正确

所有字段数据正确显示
日期格式为"年月日"格式
中文字符显示正常
无乱码

4. 样式美观

字体为宋体
表格单元格对齐正确
行间距合适
整体布局美观

🐛 可能的问题及解决方案

问题1：点击按钮没有反应

原因：可能前端代码未更新或有语法错误解决：

# 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未安装解决：

cd web
npm install html2canvas@^1.4.1 jspdf@^3.0.1

📸 测试截图建议

建议截图以下内容作为测试证据：

登记历史列表页面
查看详情弹窗（显示"下载PDF"按钮）
下载成功提示
下载的PDF文件（在文件管理器中）
打开的PDF内容（完整表格）

🔍 调试提示

如果需要调试，可以查看浏览器控制台（F12）：

关键日志

// PDF容器尺寸
PDF容器尺寸: { width: 794, height: xxx }

// Canvas尺寸
Canvas尺寸: { width: 1588, height: xxx }

// 如果有错误，会显示：
生成PDF失败: Error: ...

查看PDF容器内容

在点击"下载PDF"按钮后，PDF容器会短暂显示（虽然在屏幕外），可以在控制台中检查：

// 在handleDownloadPDF函数的console.log后打断点
// 或临时修改容器样式为可见：
// style="position: fixed; left: 0; top: 0; ..."

📞 如有问题

如果测试过程中遇到任何问题：

查看浏览器控制台错误信息
查看网络请求是否正常
确认数据是否完整
检查代码是否有语法错误

✨ 测试完成后

测试通过后，可以：

删除本测试指南文件
删除实现说明文档
正式使用该功能

祝测试顺利！ 🎉

4.8 KiB Raw Blame History Unescape Escape