4.5 KiB
4.5 KiB
✅ 出国登记PDF下载功能实现完成
📋 功能说明
为出国登记菜单 -> 登记历史选项卡 -> 查看详情弹窗中添加了PDF下载按钮和功能。
🎯 实现方式
参考了出国党籍保留菜单 -> 党籍保留记录选项卡 -> 查看详情弹窗中的PDF下载功能实现。
📄 PDF内容格式
生成的PDF文件格式为"登记报备人员因私事出国（境）登记表"，包含以下内容：
表格结构
- 标题：登记报备人员因私事出国（境）登记表
- 编号：登记ID
- 基本信息表格：
- 姓名、性别、出生日期
- 公民身份号码
- 政治面貌
- 户籍所在地
- 工作部门（教学系部）
- 职务职称、行政职级
- 人员类别代码
- 照片位置（占位）
- 登记备案责任单位（盖章位置）
- 登记备案责任单位联系人及联系电话
- 填表说明：人员类别代码填写规则
🔧 技术实现
使用的依赖库
- html2canvas (v1.4.1)：将DOM元素转换为Canvas
- jspdf (v3.0.1)：将Canvas转换为PDF并下载
核心功能点
- 隐藏的PDF容器：使用
position: fixed; left: -9999px隐藏PDF生成容器 - DOM转Canvas：使用html2canvas高清渲染（scale: 2）
- Canvas转PDF：使用jsPDF生成A4格式的PDF文档
- 自动分页：内容超过一页时自动添加新页面
关键代码位置
文件路径：web/src/views/rs/overseas-registration/index.vue
主要修改内容：
-
导入依赖（第530-531行）
import html2canvas from 'html2canvas'; import jsPDF from 'jspdf'; -
PDF生成变量（第684-685行）
const isPdfGenerating = ref(false); const pdfContainer = ref<HTMLElement>(); -
下载按钮（第442行）
<el-button type="primary" icon="Download" @click="handleDownloadPDF">下载PDF</el-button> -
PDF模板容器（第449-522行）
- 完整的表格结构
- 数据绑定
- 格式化显示
-
PDF下载函数（第975-1072行）
const handleDownloadPDF = async () => { // PDF生成逻辑 } -
日期格式化函数（第694-701行）
const formatPdfDate = (date: string) => { // 格式：年 月 日 } -
PDF样式（第1265-1342行）
- 容器样式
- 表格样式
- 文本样式
- 下划线样式
📝 使用说明
操作步骤
- 进入出国登记管理页面
- 切换到登记历史选项卡
- 点击任意记录的查看详情按钮
- 在详情弹窗底部点击下载PDF按钮
- 等待PDF生成（约1-2秒）
- 浏览器自动下载生成的PDF文件
文件命名
- 格式：
出国登记表_姓名_时间戳.pdf - 示例：
出国登记表_张三_1697520000000.pdf
✅ 功能特点
- 完整的表格格式：严格按照"登记报备人员因私事出国（境）登记表"的格式生成
- 数据自动填充：从登记详情数据自动填充到表格相应位置
- 高清渲染：使用2倍缩放确保PDF清晰度
- 自动分页：内容超过A4纸高度自动分页
- 中文字体：使用宋体确保中文显示效果
- 友好提示：生成过程中显示加载提示，完成后提示成功
🎨 样式特点
- A4纸张尺寸：210mm × 297mm
- 标题居中：20px，加粗
- 表格边框：1px黑色实线
- 字体：宋体（SimSun）
- 字号：12px（表格内容），10px（小字说明）
- 下划线文本：用于填空位置
🔍 注意事项
- 依赖已安装：html2canvas和jspdf已在package.json中配置
- 无需重启：功能代码修改后，热更新即可生效
- 浏览器兼容：支持Chrome、Edge、Safari、Firefox等现代浏览器
- 数据验证：点击下载前会验证是否有详情数据
📊 实现效果
- ✅ 点击"下载PDF"按钮成功触发下载
- ✅ PDF格式符合"登记报备人员因私事出国（境）登记表"要求
- ✅ 数据正确填充到表格对应位置
- ✅ 表格边框清晰，文字可读
- ✅ 文件命名规范，便于识别
🎉 完成时间
2025-10-11
🔗 参考实现
- 参考功能：出国党籍保留菜单 -> 党籍保留记录 -> 查看详情 -> 下载PDF
- 参考文件：
web/src/views/rs/party-membership-retention/index.vue - 实现位置：第858-956行（PDF下载函数），第450-486行（PDF模板容器）