React JS中预览并下载Azure Blob存储PDF的技术求助

核心思路 #

问题根源是你将Blob流转为Buffer/字符串后，未还原成浏览器可识别的Blob对象。浏览器处理PDF预览、下载需要依赖Blob类型数据源，再通过URL.createObjectURL()生成临时可访问URL。

步骤1：将Buffer/字符串转回Blob对象 #

根据你实际拿到的内容格式选择转换方式：

• 若为Uint8Array/Node.js Buffer：

// 假设buffer是你转换后的Buffer或Uint8Array
const pdfBlob = new Blob([buffer], { type: 'application/pdf' });

• 若为带前缀的base64字符串：

// 先移除base64前缀（如data:application/pdf;base64,）
const cleanBase64 = yourPdfString.replace(/^data:application\/pdf;base64,/, '');
const byteChars = atob(cleanBase64);
const byteNumbers = Array.from(byteChars, char => char.charCodeAt(0));
const byteArray = new Uint8Array(byteNumbers);
const pdfBlob = new Blob([byteArray], { type: 'application/pdf' });

步骤2：模态框内预览+下载功能实现 #

以下是原生HTML+JS的完整实现：

<!-- 模态框结构 -->
<div id="pdfModal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); z-index:1000;">
  <div style="width:90%; height:90%; margin:5% auto; background:white;">
    <button id="closeModal" style="padding:8px 16px; margin:10px;">关闭</button>
    <button id="downloadBtn" style="padding:8px 16px; margin:10px;">下载PDF</button>
    <iframe id="pdfFrame" style="width:100%; height:calc(100% - 60px); border:none;"></iframe>
  </div>
</div>

// 生成Blob URL并触发模态框
const pdfBlob = // 步骤1生成的Blob对象
const pdfUrl = URL.createObjectURL(pdfBlob);

// 打开预览
const modal = document.getElementById('pdfModal');
const pdfFrame = document.getElementById('pdfFrame');
pdfFrame.src = pdfUrl;
modal.style.display = 'block';

// 关闭模态框时清理资源
document.getElementById('closeModal').addEventListener('click', () => {
  modal.style.display = 'none';
  URL.revokeObjectURL(pdfUrl); // 释放内存，避免泄漏
});

// 下载逻辑
document.getElementById('downloadBtn').addEventListener('click', () => {
  const downloadLink = document.createElement('a');
  downloadLink.href = pdfUrl;
  downloadLink.download = 'document.pdf'; // 自定义下载文件名
  downloadLink.click();
});

关键注意事项 #

• 必须在用户主动交互（如点击按钮）中触发预览、下载操作，否则浏览器会拦截请求
• 用完Blob URL后务必调用URL.revokeObjectURL()释放内存
• 若前端可直接从Azure Blob获取流，建议跳过Buffer/字符串转换，直接处理Blob：

  fetch('你的Azure Blob文件地址')
    .then(res => res.blob())
    .then(pdfBlob => {
      // 直接用pdfBlob执行后续预览、下载逻辑
    });
  

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