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