cykj/hzdyjs

0 Fork 0

Files

T

weizhong e79bf5a26c “编译修改”

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

7.0 KiB

Raw Blame History

✅【完成】出国登记PDF下载功能开发报告

📋 需求描述

为出国登记菜单 -> 登记历史选项卡 -> 查看详情弹窗中增加PDF下载按钮和功能。

🎯 实现参考

参考：出国党籍保留菜单 -> 党籍保留记录选项卡 -> 查看详情弹窗中的PDF下载功能。

📄 PDF格式

生成的PDF文件格式为"登记报备人员因私事出国（境）登记表"，完全按照用户提供的表格样式实现。

🔧 技术实现

依赖库

html2canvas (v1.4.1) - DOM转Canvas
jspdf (v3.0.1) - Canvas转PDF

核心功能

✅ 点击"下载PDF"按钮触发下载
✅ 使用html2canvas将隐藏容器渲染为高清图片
✅ 使用jsPDF生成A4格式PDF文档
✅ 自动填充登记数据到表格
✅ 支持自动分页（内容超过一页）

📝 实现内容

1. 文件修改

文件路径：web/src/views/rs/overseas-registration/index.vue

2. 代码修改清单

2.1 导入依赖（第530-531行）

import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';

2.2 添加变量（第684-685行）

const isPdfGenerating = ref(false);
const pdfContainer = ref<HTMLElement>();

2.3 添加日期格式化函数（第694-701行）

const formatPdfDate = (date: string) => {
  if (!date) return '';
  const d = new Date(date);
  const year = d.getFullYear();
  const month = String(d.getMonth() + 1).padStart(2, '0');
  const day = String(d.getDate()).padStart(2, '0');
  return `${year} 年 ${month} 月 ${day} 日`;
};

2.4 添加下载按钮（第442行）

<el-button type="primary" icon="Download" @click="handleDownloadPDF">下载PDF</el-button>

2.5 添加PDF模板容器（第448-558行）

完整的表格结构，包含：

标题
编号
11行完整表格
填表说明

2.6 添加PDF下载函数（第975-1072行）

const handleDownloadPDF = async () => {
  // 完整的PDF生成逻辑
}

2.7 添加PDF样式（第1264-1406行）

包含：

PDF容器样式
表格样式
文本样式
特殊单元格样式

📊 表格结构说明

完整表格包含11行：

行号	内容描述	数据来源
1	表头：姓、名、性别、出生日期、年月日、照片	-
2	数据：姓名、性别、出生日期值	viewData
3	公民身份号码（含提示）	viewData.idNumber
4	政治面貌	viewData.politicalStatus
5	户籍所在地（含提示）	viewData.registeredAddress
6	工作部门（含提示）	viewData.department
7	职务职称、行政职级、人员类别代码	viewData.position等
8-9	登记备案责任单位（盖章、签名）	-
10-11	联系人及联系电话	-

特殊设计：

✅ 照片位置：右上角，跨5行显示照片占位
✅ 盖章位置：登记备案责任单位行，预留盖章空间
✅ 签名位置：责任单位负责人签名区域
✅ 提示文字：关键字段包含填写说明

🎨 样式特点

字体与颜色

字体：宋体（SimSun）
颜色：纯黑色（#000000）
边框：1px黑色实线

尺寸与间距

页面尺寸：A4（210mm × 297mm）
标题字号：20px，加粗
表格字号：12px
说明字号：9px（小字）
单元格内边距：5-8px

特殊样式

标题：居中、加粗
编号：右对齐
表头：居中、加粗
数据单元格：左对齐或居中
照片单元格：居中，特殊说明文字
盖章单元格：居中，灰色文字
下划线文本：用于空白填写位置

✅ 功能验证清单

基础功能

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

PDF质量

文件格式正确（可用PDF阅读器打开）
页面尺寸为A4
标题居中且加粗
表格结构完整
边框线清晰
数据正确填充
中文显示正常
日期格式正确（年月日）

数据绑定

姓名正确显示
性别正确显示（男/女）
出生日期格式化显示
身份证号正确显示
政治面貌正确显示
户籍所在地正确显示
工作部门正确显示
职务职称正确显示
行政职级正确显示
人员类别代码正确显示

📁 文件清单

修改的文件

✅ web/src/views/rs/overseas-registration/index.vue - 主功能文件

文档文件

✅ ✅出国登记PDF下载功能实现完成.md - 功能说明文档
✅ 🚀出国登记PDF下载功能测试指南.md - 测试指南
✅ ✅【完成】出国登记PDF下载功能开发报告.md - 本文档

🚀 测试步骤

快速测试

# 1. 确保前端已运行
cd web
npm run dev

# 2. 访问系统
# http://localhost

# 3. 导航至功能页面
# 人事管理 -> 出国登记管理 -> 登记历史 -> 查看详情 -> 下载PDF

详细测试步骤

请参考：🚀出国登记PDF下载功能测试指南.md

📸 预期效果

1. 操作界面

详情弹窗底部显示"下载PDF"按钮（蓝色，带下载图标）
点击按钮后显示加载提示
下载成功后显示成功提示

2. PDF文件

文件名：出国登记表_姓名_时间戳.pdf
打开后显示完整的登记表格
所有数据正确填充
格式美观，便于打印

💡 技术亮点

隐藏渲染：使用 position: fixed; left: -9999px 隐藏PDF容器，不影响页面显示
高清输出：设置 scale: 2 提高PDF清晰度
智能分页：自动检测内容高度，超过一页自动分页
数据绑定：使用Vue的响应式数据自动填充表格
格式化显示：日期、性别等字段进行格式化处理
错误处理：完善的try-catch错误处理和用户提示

🎓 参考代码

党籍保留PDF下载实现

文件：web/src/views/rs/party-membership-retention/index.vue
PDF下载函数：第858-956行
PDF模板容器：第450-486行
PDF样式：第1330-1385行

📝 注意事项

依赖已安装：html2canvas 和 jspdf 已在 package.json 中配置
无需重启：代码修改后前端热更新即可生效
浏览器兼容：支持所有现代浏览器
数据完整性：确保登记记录包含所有必要字段
打印友好：生成的PDF可直接打印使用

🎉 开发完成

开发人员：AI Assistant
完成时间：2025-10-11
开发用时：约30分钟
代码质量：✅ 无Lint错误，无TypeScript错误
测试状态：待测试
文档状态：✅ 完整

📞 后续支持

如需调整PDF格式或遇到问题，请参考：

本开发报告
测试指南文档
党籍保留的参考实现
html2canvas 和 jsPDF 官方文档

祝使用愉快！ 🎉

7.0 KiB Raw Blame History Unescape Escape