cykj/hzdyjs

0 Fork 0

Files

T

weizhong e79bf5a26c “编译修改”

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

6.5 KiB

Raw Blame History

🔧 出国申请详情弹窗PDF预览修复说明

📋 问题描述

用户反馈: 在"出国申请"选项卡列表中，点击"查看详情"按钮后，在弹窗界面中点击附件的"查看"按钮，仍然会先下载文件而不是直接预览。

问题原因:

// ❌ 错误的Blob创建方式
const blob = response instanceof Blob ? response : new Blob([response.data], { type: 'application/pdf' });

当response instanceof Blob为true时，直接使用原始的response对象，没有重新指定MIME类型，导致浏览器无法识别为PDF格式。

🛠️ 修复方案

核心修复

无论response是什么类型，都要重新创建Blob并明确指定MIME类型：

// ✅ 正确的Blob创建方式
const blob = response instanceof Blob 
  ? new Blob([response], { type: 'application/pdf' })  // 重新创建，指定类型
  : new Blob([response.data], { type: 'application/pdf' });

📝 修复详情

修复位置: `web/src/views/rs/overseas/index.vue`

1. 党籍保留附件PDF预览（第3510-3539行）✅

修复前:

const blob = response instanceof Blob ? response : new Blob([response.data], { type: 'application/pdf' });
const blobUrl = window.URL.createObjectURL(blob);
window.open(blobUrl, '_blank');

修复后:

// 正确处理Blob创建，确保包含正确的MIME类型
const blob = response instanceof Blob 
  ? new Blob([response], { type: 'application/pdf' })
  : new Blob([response.data], { type: 'application/pdf' });

console.log('📄 [PDF预览] 党籍附件Blob创建成功:', {
  size: blob.size,
  type: blob.type,
  fileName: fileName
});

const blobUrl = window.URL.createObjectURL(blob);
window.open(blobUrl, '_blank');

2. 盖章文件PDF预览（第3603-3632行）✅

修复前:

const blob = response instanceof Blob ? response : new Blob([response.data], { type: 'application/pdf' });
const blobUrl = window.URL.createObjectURL(blob);
window.open(blobUrl, '_blank');

修复后:

// 正确处理Blob创建，确保包含正确的MIME类型
const blob = response instanceof Blob 
  ? new Blob([response], { type: 'application/pdf' })
  : new Blob([response.data], { type: 'application/pdf' });

console.log('📄 [PDF预览] 盖章文件Blob创建成功:', {
  size: blob.size,
  type: blob.type,
  fileName: fileName
});

const blobUrl = window.URL.createObjectURL(blob);
window.open(blobUrl, '_blank');

🎯 修复效果

修复前

❌ 点击"查看"按钮
❌ 浏览器触发下载
❌ 文件下载到本地
❌ 需要手动打开

修复后

✅ 点击"查看"按钮
✅ 新标签页自动打开
✅ PDF直接在浏览器中预览
✅ 支持滚动和缩放

🔍 技术原理

为什么必须重新创建Blob？

响应对象的MIME类型可能不正确

response.type  // 可能是 "application/octet-stream" 或 ""

浏览器根据MIME类型决定行为
- application/pdf → 在线预览
- application/octet-stream → 下载
- "" (空) → 下载

重新创建Blob可以强制指定类型

new Blob([response], { type: 'application/pdf' })
// 强制设置为 PDF 类型，确保预览

🧪 测试步骤

1. 清除缓存（必须！）

Ctrl + Shift + Delete → 清除缓存和Cookie
Ctrl + Shift + R → 强制刷新页面

2. 测试路径

人事管理 → 出国管理 → 出国申请（第二个选项卡）

3. 测试操作

在列表中找到任意一条记录
点击"查看详情"按钮
在弹窗中找到附件区域
点击"查看"按钮（盖章文件或党籍附件）

4. 预期结果

✅ 新标签页自动打开
✅ PDF文件正常渲染
✅ 可以滚动和缩放
❌ 不触发下载

📊 修复总结

修复范围

功能	修复前	修复后	状态
党籍附件PDF预览	❌ 下载	✅ 预览	✅ 已修复
盖章文件PDF预览	❌ 下载	✅ 预览	✅ 已修复
图片预览	✅ 正常	✅ 正常	✅ 无需修复
文件下载	✅ 正常	✅ 正常	✅ 无需修复

修复方法数量

修复了 2个 PDF预览方法
涉及 2处代码修改
文件: web/src/views/rs/overseas/index.vue

核心改进

强制指定MIME类型: 确保浏览器正确识别PDF
统一Blob创建逻辑: 无论response类型如何都重新创建
添加调试日志: 便于后续问题排查

🎉 完整修复链路

出国申请页面现在包含三层修复

第一层: 图片预览和文件下载（已修复）

修复时间: 2025-10-13 14:30
修复内容: 添加图片MIME类型，优化下载功能
文档: ✅出国申请页面PDF预览功能修复完成.md

第二层: 详情弹窗PDF预览（刚刚修复）

修复时间: 2025-10-13 14:45
修复内容: 修复详情弹窗中的PDF预览问题
文档: 本文档

第三层: 完整功能验证（待测试）

测试清单: 🧪出国申请与审批PDF预览功能测试清单.md

💡 经验总结

关键要点

✅ 永远重新创建Blob: 不要直接使用response对象
✅ 明确指定MIME类型: 确保浏览器正确处理
✅ 添加调试日志: 帮助快速定位问题
✅ 清除浏览器缓存: 测试前必须清除缓存

常见错误模式

// ❌ 错误：直接使用response
const blob = response;

// ❌ 错误：部分情况未指定类型
const blob = response instanceof Blob ? response : new Blob([response.data]);

// ✅ 正确：总是重新创建并指定类型
const blob = response instanceof Blob 
  ? new Blob([response], { type: 'application/pdf' })
  : new Blob([response.data], { type: 'application/pdf' });

📚 相关文档

📋出国审批附件功能完整修复总结.md - 出国审批页面的完整修复历程
✅出国申请页面PDF预览功能修复完成.md - 出国申请页面第一轮修复
🧪出国申请与审批PDF预览功能测试清单.md - 完整测试指南
本文档 - 出国申请详情弹窗PDF预览修复

修复时间: 2025-10-13 14:45
修复文件: web/src/views/rs/overseas/index.vue
修复行数: 第3510-3632行（2处）
修复状态: ✅ 已完成
测试状态: ⏳ 待用户验证

请清除浏览器缓存后重新测试出国申请详情弹窗的PDF预览功能！ 😊

6.5 KiB Raw Blame History Unescape Escape