Vue前端从第三方经两台服务器获取PDF二进制流下载失败求助

先排查服务器端转发逻辑（核心问题大概率在此） #

经过两台服务器转发二进制PDF时，最容易出现的问题是二进制数据被错误编码/转成字符串，导致原始字节丢失。按以下步骤检查：

• 确保两台服务器均以字节流/Buffer方式转发数据，不要将二进制内容当成字符串处理（比如避免用buffer.toString()默认utf-8编码解析，不要在转发时做字符串转码）。
  例：Node.js环境下，Server2请求第三方后，直接将响应的Buffer原封不动返回给Server1：

  // Server2 转发第三方PDF的正确写法
  const thirdPartyResponse = await fetch('第三方PDF接口地址');
  const pdfBuffer = await thirdPartyResponse.buffer();
  res.setHeader('Content-Type', 'application/pdf');
  res.send(pdfBuffer); // 直接返回Buffer，不做字符串转换
  

• 检查响应头：除了Content-Type: application/pdf，需确保没有额外设置Content-Encoding（如gzip，除非第三方接口确实返回压缩数据），避免浏览器解压缩错误；可添加Content-Disposition: attachment; filename="invoice.pdf"辅助浏览器识别下载类型。
• 对比第三方接口和Server2返回的Content-Length，如果数值不一致，说明转发过程中数据已被修改或丢失。

前端正确处理方案 #

根据你使用的请求工具（假设是Axios，若为Fetch需调整），按以下步骤修改：

1. 配置请求的responseType #

确保请求时明确设置responseType: 'blob'，让请求工具直接返回Blob对象：

// 假设Api是基于Axios封装的
async function downloadAccountInvoice(accountId, invoiceId) {
  return Api.get(`/api/invoices/${accountId}/${invoiceId}`, {
    responseType: 'blob' // 必须设置，避免Axios将二进制转成字符串
  });
}

2. 正确生成Blob并触发下载 #

const response = await Api.downloadAccountInvoice(accountId, invoiceId);
// Axios设置responseType: 'blob'后，response.data就是Blob对象
const blob = response.data;

const url = window.URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = `${invoiceId}.pdf`;
document.body.appendChild(link);
link.click();
// 清理资源
document.body.removeChild(link);
window.URL.revokeObjectURL(url);

若必须用Base64中转（不推荐，仅作备选） #

如果服务器确实需要返回Base64字符串，需保证编码和解码流程正确：

• Server2端编码：

  const pdfBuffer = await thirdPartyResponse.buffer();
  const base64Str = pdfBuffer.toString('base64');
  res.send(base64Str);
  

• 前端解码并生成Blob：

  const response = await Api.downloadAccountInvoice(accountId, invoiceId);
  const base64Str = response.data;
  // 将Base64转成Uint8Array（二进制字节数组）
  const byteChars = atob(base64Str);
  const byteNumbers = Array.from(byteChars, char => char.charCodeAt(0));
  const byteArray = new Uint8Array(byteNumbers);
  
  const blob = new Blob([byteArray], { type: 'application/pdf' });
  // 后续下载代码同上
  

调试验证步骤 #

1. 打开浏览器开发者工具的「网络」面板，找到下载PDF的请求：
   • 切换到「响应」标签，若能直接预览PDF，说明服务器返回正确，问题在前端处理；
   • 若无法预览，说明服务器转发时已损坏数据，重点排查服务器端逻辑。
2. 检查请求的「响应头」，确认Content-Type和Content-Length是否符合预期。

内容的提问来源于stack exchange，提问作者Avner .H.