React中Blob转PDF字符串再转Base64后下载失败求助

云上老周

2026-7-16

问题修复方案

问题根源

服务端转码时错误地将PDF二进制Buffer转换为UTF-8字符串，再基于该字符串生成Base64编码。PDF属于二进制文件，直接转字符串会丢失或损坏关键二进制数据，导致最终下载的PDF文件无法正常解析。

修复后的服务端代码

修改downloadBlobToString的编码逻辑，直接对二进制Buffer进行Base64编码：

const downloadBlobToString = async (containerClient: any, blobName: any) => {
  const blobClient = await containerClient.getBlobClient(blobName);
  const downloadResponse = await blobClient.download(0);
  const downloaded = await streamToBuffer(downloadResponse.readableStreamBody);
  // 直接对Buffer做Base64编码，跳过toString()步骤
  const encodedString = downloaded.toString('base64');
  return encodedString;
};

前端代码优化与验证

原前端转换逻辑是正确的，也可以简化为直接使用data URI方式下载，无需手动处理ArrayBuffer：

const savePdfFromBase64 = (reportName: string, base64: string) => {
  const link = document.createElement('a');
  link.href = `data:application/pdf;base64,${base64}`;
  link.download = reportName;
  link.click();
};

// 调用方式
savePdfFromBase64('DownloadedPDF', props.offerLetterPdf);