React JS中如何将Blob存储的PDF转为可读取格式并正常下载

先排查代码里的明显错误，再解决数据传输导致的文件损坏问题：

1. 服务端代码的语法/变量错误 #

你的服务端代码存在两处直接问题：

• subContName被重复赋值，会触发语法错误，保留其中一处赋值即可
• 下载响应的变量名不匹配：定义了uploadBlobResponse，但后续调用时用了未定义的downloadBlockBlobResponse，变量名需统一

修正后的服务端核心代码：

const blobServiceClient = new BlobServiceClient(blobSASToken);
const containerName = blob_container;
const subContName = appConfig.blob.folder; // 保留一个赋值即可
const containerClient = blobServiceClient.getContainerClient(containerName);
// 注意：如果文件在子文件夹下，offerLetterName需要包含完整路径，比如 `${subContName}/filename.pdf`
const blockBlobClient = containerClient.getBlockBlobClient(offerLetterName);
const downloadBlobResponse = await blockBlobClient.download();
const downloaded = await streamToBuffer(downloadBlobResponse.readableStreamBody);

// 若用Express等框架返回数据，必须设置正确响应头
res.setHeader('Content-Type', 'application/pdf');
res.setHeader('Content-Disposition', 'attachment; filename="test.pdf"');
return res.send(downloaded);

streamToBuffer函数逻辑正常，可保留使用。

2. 客户端数据接收错误 #

前端默认会把响应解析为JSON格式，这会导致二进制PDF数据被转成字符串，直接损坏文件。必须在请求时指定responseType为blob或arraybuffer：

Axios请求示例： #

axios.get('/your-download-api', {
  responseType: 'blob' // 关键：告知axios返回二进制Blob数据
}).then(res => {
  const blob = new Blob([res.data], { type: 'application/pdf' });
  const link = document.createElement('a');
  link.href = window.URL.createObjectURL(blob);
  link.download = 'test.pdf';
  link.click();
  window.URL.revokeObjectURL(link.href); // 释放内存
});

Fetch请求示例： #

fetch('/your-download-api')
  .then(res => res.blob()) // 直接将响应解析为Blob
  .then(blob => {
    const link = document.createElement('a');
    link.href = window.URL.createObjectURL(blob);
    link.download = 'test.pdf';
    link.click();
    window.URL.revokeObjectURL(link.href);
  });

3. 额外排查点 #

• 先验证Blob存储中的原始PDF是否正常：直接在Azure门户下载原文件，确认能正常打开，排除源文件损坏的可能
• 核对服务端返回的Buffer长度与Blob存储中文件的实际大小是否一致，确保数据没有被截断

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