diff --git a/web/package.json b/web/package.json
index a02f8e83..ada27db8 100644
--- a/web/package.json
+++ b/web/package.json
@@ -32,9 +32,11 @@
     "element-plus": "2.9.8",
     "file-saver": "2.0.5",
     "highlight.js": "11.9.0",
+    "html2canvas": "^1.4.1",
     "image-conversion": "2.1.1",
     "js-cookie": "3.0.5",
     "jsencrypt": "3.3.2",
+    "jspdf": "^3.0.1",
     "nprogress": "0.2.0",
     "pinia": "3.0.2",
     "screenfull": "6.0.2",
diff --git a/web/src/views/zsjy/recruitmentPoster/index.vue b/web/src/views/zsjy/recruitmentPoster/index.vue
index a9cc0eac..242b1cc8 100644
--- a/web/src/views/zsjy/recruitmentPoster/index.vue
+++ b/web/src/views/zsjy/recruitmentPoster/index.vue
@@ -241,31 +241,13 @@
     </el-dialog>
 
     <!-- 预览对话框 -->
-    <el-dialog title="海报预览" v-model="previewOpen" width="800px" append-to-body>
-      <div style="text-align: center; padding: 20px;">
-        <el-image
-          v-if="previewData.posterPath"
-          :src="previewData.posterPath"
-          fit="contain"
-          style="max-width: 100%; max-height: 600px;"
-        >
-          <template #error>
-            <div style="width: 100%; height: 400px; display: flex; align-items: center; justify-content: center; background: #f5f7fa; color: #909399;">
-              <el-icon size="60"><Picture /></el-icon>
-              <div style="margin-top: 10px;">图片加载失败</div>
-            </div>
-          </template>
-        </el-image>
-      </div>
-      <el-descriptions :column="2" border style="margin-top: 20px;">
-        <el-descriptions-item label="所属企业">{{ previewData.enterpriseName }}</el-descriptions-item>
-        <el-descriptions-item label="海报类型">
-          <dict-tag :options="zsjy_poster_type" :value="previewData.posterType" />
-        </el-descriptions-item>
-        <el-descriptions-item label="关联岗位" :span="2">{{ previewData.positionName || '-' }}</el-descriptions-item>
-        <el-descriptions-item label="创建时间">{{ previewData.createTime }}</el-descriptions-item>
-        <el-descriptions-item label="更新时间">{{ previewData.updateTime }}</el-descriptions-item>
-      </el-descriptions>
+    <el-dialog title="海报预览" v-model="previewOpen" width="900px" append-to-body>
+      <PosterPreview
+        v-if="previewOpen && previewData.posterPath"
+        :poster-data="previewData"
+        :enterprise-detail="enterpriseDetail"
+        :position-detail="positionDetail"
+      />
       <template #footer>
         <div class="dialog-footer">
           <el-button @click="previewOpen = false">关 闭</el-button>
@@ -277,10 +259,13 @@
 
 <script setup name="RecruitmentPoster" lang="ts">
 import { getCurrentInstance, ComponentInternalInstance, ref, reactive, toRefs } from 'vue'
-import { ElFormInstance } from 'element-plus'
+import { FormInstance } from 'element-plus'
 import { listRecruitmentPoster, getRecruitmentPoster, delRecruitmentPoster, addRecruitmentPoster, updateRecruitmentPoster, exportRecruitmentPoster, listPositionOptions } from '@/api/zsjy/recruitmentPoster'
 import { listEnterpriseOptions } from '@/api/zsjy/jobPosition'
+import { getEnterprise } from '@/api/zsjy/enterprise'
+import { getJobPosition } from '@/api/zsjy/jobPosition'
 import { RecruitmentPosterVO, RecruitmentPosterForm, RecruitmentPosterQuery } from '@/api/zsjy/types'
+import PosterPreview from '@/components/PosterPreview/index.vue'
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance
 
@@ -302,8 +287,8 @@ const multiple = ref(true)
 // 表单相关
 const open = ref(false)
 const title = ref('')
-const posterFormRef = ref<ElFormInstance>()
-const queryFormRef = ref<ElFormInstance>()
+const posterFormRef = ref<FormInstance>()
+const queryFormRef = ref<FormInstance>()
 
 // 选项数据
 const enterpriseOptions = ref<any[]>([])
@@ -338,6 +323,8 @@ const rules = {
 // 预览数据
 const previewOpen = ref(false)
 const previewData = ref<RecruitmentPosterVO>({} as RecruitmentPosterVO)
+const enterpriseDetail = ref<any>({})
+const positionDetail = ref<any>({})
 
 /** 查询招聘海报列表 */
 const getList = async () => {
@@ -449,9 +436,40 @@ const handleUpdate = async (row?: RecruitmentPosterVO) => {
 
 /** 预览按钮操作 */
 const handlePreview = async (row: RecruitmentPosterVO) => {
-  const res = await getRecruitmentPoster(row.id)
-  previewData.value = res.data
-  previewOpen.value = true
+  try {
+    // 获取海报详情
+    const res = await getRecruitmentPoster(row.id)
+    previewData.value = res.data
+    
+    // 调试信息：打印海报详情
+    console.log('海报详情:', res.data)
+    console.log('海报类型:', res.data.posterType)
+    console.log('企业ID:', res.data.enterpriseId)
+    console.log('岗位ID:', res.data.positionId)
+    
+    // 获取企业详情
+    if (res.data.enterpriseId) {
+      const enterpriseRes = await getEnterprise(res.data.enterpriseId)
+      enterpriseDetail.value = enterpriseRes.data
+      console.log('企业详情:', enterpriseRes.data)
+    }
+    
+    // 获取岗位详情（如果是岗位海报）
+    if (res.data.positionId) {
+      console.log('准备获取岗位详情，岗位ID:', res.data.positionId)
+      const positionRes = await getJobPosition(res.data.positionId)
+      positionDetail.value = positionRes.data
+      console.log('岗位详情:', positionRes.data)
+    } else {
+      console.log('没有岗位ID，设置空对象')
+      positionDetail.value = {}
+    }
+    
+    previewOpen.value = true
+  } catch (error) {
+    console.error('获取预览数据失败:', error)
+    proxy?.$modal.msgError('获取预览数据失败')
+  }
 }
 
 /** 提交按钮 */