hzdyjs/docs/变更管理/code-adjust-record-2025-01-26-招聘海报预览功能开发.md

招聘海报预览功能开发记录

📋 基本信息

项目	信息
变更日期	2025-01-26
变更时间	15:40:00
变更人员	Cursor AI
变更类型	功能开发
影响模块	招生就业-招聘海报管理
变更状态	✅ 开发完成

🎯 功能需求

用户要求将招聘海报的预览功能改造为：

1. 图片背景海报：以上传的图片作为背景
2. 信息叠加展示：在图片上叠加企业信息和岗位信息
3. PDF导出功能：支持将海报导出为PDF文件
4. 图片导出功能：支持将海报导出为图片文件
5. 美观的设计：专业的海报设计，包含装饰元素和渐变效果

🛠️ 技术实现

1. 依赖包安装

安装了PDF导出和图片处理所需的依赖：

npm install html2canvas jspdf --save

• html2canvas: 将DOM元素转换为canvas图像
• jspdf: 生成PDF文件

2. 新建组件：PosterPreview

创建了专用的海报预览组件：web/src/components/PosterPreview/index.vue

核心功能特性：

• 响应式背景：自动适配上传的海报图片作为背景
• 信息叠加：企业名称、岗位信息、联系方式等美观叠加
• 渐变遮罩：添加渐变蒙版确保文字可读性
• 装饰元素：金色边框、图标、半透明卡片等设计元素
• 导出功能：支持PDF和PNG格式导出

组件接口设计：

interface PosterData {
  posterPath: string      // 海报图片路径
  enterpriseName: string  // 企业名称
  positionName?: string   // 岗位名称
  posterType: string      // 海报类型
}

interface EnterpriseDetail {
  mainBusiness?: string     // 主营业务
  enterpriseScale?: string  // 企业规模
  contactPhone?: string     // 联系电话
  email?: string           // 电子邮箱
  address?: string         // 企业地址
}

interface PositionDetail {
  workAddress?: string     // 工作地点
  salary?: string         // 薪资待遇
  workTime?: string       // 工作时间
  requiredSkills?: string // 技能要求
}

3. 海报设计规范

布局结构：

┌─────────────────────────────────┐
│ 【企业名称】                      │ ← 顶部：企业标题区
│ 诚聘英才 · 共创未来                │
├─────────────────────────────────│
│                                │
│    【岗位名称】                    │ ← 中部：岗位信息区  
│    📍 工作地点                     │
│    💰 薪资待遇                     │
│    ⏰ 工作时间                     │
│                                │
├─────────────────────────────────│
│ 【企业信息卡片】                   │ ← 底部：企业详情区
│ 主营业务：...                     │
│ 企业规模：...                     │
│ 联系电话：...                     │
│ 电子邮箱：...                     │
└─────────────────────────────────┘

视觉设计元素：

• 渐变文字：企业名称和岗位名称使用金色渐变效果
• 半透明卡片：信息区域使用毛玻璃效果背景
• 图标装饰：地点、薪资、时间等使用emoji图标
• 整体遮罩：背景图片添加半透明渐变遮罩

4. 导出功能实现

PDF导出流程：

1. 使用html2canvas截取海报DOM元素
2. 转换为高分辨率canvas（scale: 2）
3. 将canvas转换为PNG图像数据
4. 使用jsPDF创建A4格式PDF
5. 计算适合的图片尺寸并添加到PDF
6. 触发下载

图片导出流程：

1. 使用html2canvas截取海报DOM元素
2. 转换为高分辨率PNG图像
3. 创建下载链接触发保存

5. 数据获取逻辑

修改了预览功能的数据获取：

const handlePreview = async (row: RecruitmentPosterVO) => {
  try {
    // 获取海报详情
    const res = await getRecruitmentPoster(row.id)
    previewData.value = res.data
    
    // 获取企业详情
    if (res.data.enterpriseId) {
      const enterpriseRes = await getEnterprise(res.data.enterpriseId)
      enterpriseDetail.value = enterpriseRes.data
    }
    
    // 获取岗位详情（如果是岗位海报）
    if (res.data.positionId) {
      const positionRes = await getJobPosition(res.data.positionId)
      positionDetail.value = positionRes.data
    }
    
    previewOpen.value = true
  } catch (error) {
    console.error('获取预览数据失败:', error)
    proxy?.$modal.msgError('获取预览数据失败')
  }
}

📊 开发详情

修改的文件列表

前端文件 (2个)

1. web/src/components/PosterPreview/index.vue (新增)

   • 专业的海报预览组件
   • 支持图片背景、信息叠加、美观设计
   • 集成PDF和图片导出功能
   • 响应式设计，适配移动端
   • 完整的TypeScript类型定义

2. web/src/views/zsjy/recruitmentPoster/index.vue (修改)

   • 集成新的PosterPreview组件
   • 添加企业详情和岗位详情数据获取
   • 更新预览对话框宽度适配新组件
   • 修复相关导入和类型定义

依赖包更新 (1个)

3. web/package.json (更新)
   • 添加html2canvas：DOM到Canvas转换
   • 添加jspdf：PDF生成库

功能特性对比

功能项	修改前	修改后
预览方式	简单图片预览	专业海报设计预览
背景展示	固定尺寸图片	全背景图片 + 信息叠加
信息显示	表格形式展示	美观卡片式叠加显示
导出功能	❌ 无	✅ PDF + 图片导出
视觉效果	基础样式	渐变文字 + 毛玻璃效果
响应式	基础响应式	全面移动端适配

设计系统规范

色彩方案：

• 主色调：金色渐变 (#ffd700 → #ffed4e)
• 副色调：橘红渐变 (#ff6b6b → #ffd93d)
• 背景蒙版：黑色渐变透明 (0.3 → 0.1 → 0.4)
• 卡片背景：半透明黑色 + 毛玻璃效果

字体规范：

• 企业名称：48px, 粗体, 金色渐变
• 岗位标题：36px, 粗体, 橘红渐变
• 详情信息：16-18px, 白色半透明
• 标语：18px, 轻字重, 4px字间距

布局规范：

• 海报尺寸：600x800px (3:4比例)
• 内边距：40px
• 圆角：8px (外框), 15px-25px (内部卡片)
• 阴影：0 8px 32px rgba(0, 0, 0, 0.15)

✅ 验证步骤

1. 功能验证

• 访问招聘海报管理页面
• 点击海报列表中的"预览"按钮
• 确认海报以图片为背景正确显示
• 验证企业信息和岗位信息正确叠加显示
• 测试PDF导出功能
• 测试图片导出功能

2. 设计验证

• 确认金色渐变文字效果
• 验证半透明卡片和毛玻璃效果
• 检查图标和装饰元素显示
• 测试移动端响应式适配

3. 兼容性验证

• 测试不同尺寸图片的背景适配
• 验证企业海报（无岗位信息）的显示
• 验证岗位海报（含完整信息）的显示
• 检查导出文件的质量和命名

🔧 技术细节

关键技术实现

1. 高分辨率截图

const canvas = await html2canvas(posterRef.value, {
  backgroundColor: null,
  scale: 2,  // 2倍分辨率确保清晰度
  useCORS: true,
  allowTaint: true,
  foreignObjectRendering: false
})

2. PDF尺寸计算

const pdf = new jsPDF({
  orientation: 'portrait',
  unit: 'mm', 
  format: 'a4'
})

const imgWidth = 190  // A4宽度减去边距
const imgHeight = (canvas.height * imgWidth) / canvas.width
pdf.addImage(imgData, 'PNG', 10, 10, imgWidth, imgHeight)

3. 动态样式绑定

const canvasStyle = computed(() => ({
  backgroundImage: `url(${props.posterData.posterPath})`,
  backgroundSize: 'cover',
  backgroundPosition: 'center',
  backgroundRepeat: 'no-repeat'
}))

性能优化

1. 懒加载：预览组件仅在对话框打开时渲染
2. 计算属性：背景样式使用computed优化
3. 错误处理：完整的try-catch和用户友好的错误提示
4. 内存管理：导出后及时清理临时对象

📝 使用说明

基本用法

1. 在招聘海报列表中点击"预览"按钮
2. 查看专业设计的海报效果
3. 点击"导出PDF"生成PDF文件
4. 点击"导出图片"保存PNG图片

支持的海报类型

• 企业海报：展示企业信息和联系方式
• 岗位海报：展示企业信息 + 具体岗位详情

导出文件命名规则

• PDF文件：{企业名称}_招聘海报_{时间戳}.pdf
• PNG文件：{企业名称}_招聘海报_{时间戳}.png

🔗 相关文档

• 招聘海报列表显示问题修复
• 招聘海报Controller缺失方法修复
• 招聘信息前端开发

🚀 后续优化建议

1. 模板系统：支持多种海报模板选择
2. 在线编辑：提供拖拽式海报编辑功能
3. 批量导出：支持批量导出多个海报
4. 社交分享：集成社交媒体分享功能
5. 二维码：自动生成企业联系二维码