Vue项目本地环境Blob格式PDF无法打开，生产环境正常的问题排查

我之前也碰到过完全一样的情况！问题的核心原因几乎可以确定是你的API请求没有正确指定响应类型，导致本地环境下拿到的不是原始二进制数据，而是被自动解析成了字符串，转成Blob后PDF文件就损坏了。生产环境可能因为服务器配置或请求环境的差异，刚好兼容了这个问题，但本地环境就暴露了出来。

下面是具体的解决步骤：

1. 修正API请求的响应类型 #

不管你用的是axios、fetch还是其他请求库，都必须明确告诉它要返回二进制数据，而不是默认的JSON或字符串。

如果用axios： #

在你的apiService.getPdf()方法里，添加responseType: 'blob'配置：

// apiService.js 中的getPdf方法
getPdf() {
  return axios.get('/your-pdf-api-path', {
    responseType: 'blob' // 关键配置：直接返回Blob对象
  });
}

如果用fetch： #

直接在响应处理时调用response.blob()：

// apiService.js 中的getPdf方法
getPdf() {
  return fetch('/your-pdf-api-path')
    .then(response => {
      if (!response.ok) throw new Error('请求失败');
      return response.blob(); // 转换为Blob对象
    });
}

2. 优化前端Blob处理逻辑 #

修改你的getFullReportAndRedirect方法，适配已经正确获取的Blob数据（避免重复转换导致的问题），同时优化URL revoke的时机：

async getFullReportAndRedirect() {
  try {
    const result = await apiService.getPdf();
    let newBlob = result;
    
    // 兼容如果返回的是ArrayBuffer的情况（比如某些请求库默认返回ArrayBuffer）
    if (!(result instanceof Blob)) {
      newBlob = new Blob([result], { type: "application/pdf" });
    }

    // 处理IE/Edge的特殊情况
    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
      window.navigator.msSaveOrOpenBlob(newBlob);
      return;
    }

    const blobUrl = window.URL.createObjectURL(newBlob);
    const link = document.createElement('a');
    
    link.href = blobUrl;
    link.target = '_blank';
    // 如果需要下载而非预览，可以添加download属性
    // link.download = 'full-report.pdf';
    
    // 触发点击
    link.click();

    // 在链接加载完成后释放Blob URL，避免内存泄漏
    link.onload = () => {
      window.URL.revokeObjectURL(blobUrl);
    };
  } catch(err) {
    console.error('加载PDF失败:', err);
  }
}

额外排查点 #

如果以上步骤还没解决问题，可以检查：

• 本地服务器的响应头是否包含Content-Type: application/pdf，确保浏览器能正确识别文件类型
• 本地是否存在跨域问题？不过生产环境正常的话这个概率较低，但可以确认API请求在本地是否成功返回了完整的二进制数据

内容的提问来源于stack exchange，提问作者JunDev