React前端打开带SAS Token的Azure Blob PDF显示二进制问题求助

核心原因 #

浏览器无法识别PDF文件，是因为Azure Blob返回的响应缺少正确的Content-Type: application/pdf头，导致浏览器将原始二进制数据直接渲染为文本；少数情况是前端跳转方式未正确触发浏览器的PDF解析逻辑。

解决方法 #

一、前端React快速修复（适配已有URL） #

如果暂时无法修改Azure或后端配置，可通过前端手动处理Blob内容：

const openPdf = async (sasUrl) => {
  try {
    const res = await fetch(sasUrl);
    const pdfBlob = await res.blob();
    const localUrl = URL.createObjectURL(pdfBlob);
    // 打开新标签页
    window.open(localUrl, '_blank');
    // 延迟释放URL资源，避免内存泄漏
    setTimeout(() => URL.revokeObjectURL(localUrl), 10000);
  } catch (err) {
    console.error('打开PDF失败:', err);
  }
};

// 使用示例
<button onClick={() => openPdf('你的Azure Blob SAS URL')}>打开PDF</button>

如果直接访问SAS URL能正常打开PDF，但通过a标签跳转异常，检查a标签配置：

<a 
  href={sasUrl} 
  target="_blank" 
  rel="noopener noreferrer"
  // 不要加download属性，否则会触发下载而非打开
>
  打开PDF
</a>

二、Azure Blob/后端根本修复（推荐） #

从源头设置正确的响应头，避免前端额外处理：

1. 设置Blob的Content-Type属性
   • 上传时配置：使用Azure SDK上传PDF时，指定Content-Type为application/pdf。示例（.NET）：

     var blobClient = containerClient.GetBlobClient("document.pdf");
     await blobClient.UploadAsync("local-file-path.pdf", new BlobUploadOptions
     {
         HttpHeaders = new BlobHttpHeaders
         {
             ContentType = "application/pdf"
         }
     });
     

   • 已上传Blob修改：在Azure Portal进入存储账户→目标容器→找到PDF Blob→「属性」→设置「内容类型」为application/pdf并保存。
2. 检查SAS Token权限
   生成SAS Token时，确保授予Read权限，且未添加会覆盖响应头的限制参数，保证浏览器能获取到完整的Content-Type头。
3. 后端代理场景
   如果后端作为代理转发Blob内容，需确保转发时完整传递Content-Type: application/pdf响应头，不要修改或丢弃该字段。

三、排查步骤 #

1. 直接在浏览器地址栏输入SAS URL，验证是否能正常打开PDF：
   • 若仍显示二进制：确认Azure Blob的Content-Type配置；
   • 若正常打开：检查前端跳转逻辑，比如是否误加download属性，或fetch请求是否有响应头处理错误。

内容的提问来源于stack exchange，提问作者Víshnū