React项目中使用fetch下载PDF加载失败问题求助

1. 移除重复的Blob包装 #

你当前代码里将已获取到的blob再次用new Blob([blob])包装，会破坏原PDF文件的结构，直接使用原始blob创建URL即可：

const fileURL = window.URL.createObjectURL(blob);

2. 明确指定Blob的MIME类型 #

创建Blob时指定PDF对应的MIME类型application/pdf，确保浏览器能正确识别文件格式：

// 若确实需要重新包装（一般第一步优化后无需此操作）
const fileURL = window.URL.createObjectURL(new Blob([blob], { type: 'application/pdf' }));

3. 增加fetch请求的错误校验 #

确保fetch请求成功，避免下载到错误内容导致PDF无法打开：

fetch('TermsEquipSales.pdf')
  .then(res => {
    if (!res.ok) throw new Error('文件请求失败');
    return res.blob();
  })
  .then(blob => {
    // 后续下载逻辑
  })
  .catch(err => console.error(err));

4. 验证PDF文件路径正确性 #

• 确认TermsEquipSales.pdf放在React项目的public目录下，保证打包后能被正确访问；
• 如果是远程文件，检查服务器是否允许跨域下载，且返回的是完整有效的PDF内容。

5. 简化下载逻辑（可选） #

直接使用<a>标签的原生download属性，无需fetch，逻辑更简洁：

<Box>
  <a href="TermsEquipSales.pdf" download="TermsEquipSales.pdf">
    <button>
      Standard Terms and Conditions for the Sale of Equipment
    </button>
  </a>
</Box>

注：该方式要求文件同域，或服务器配置了允许跨域下载的响应头。

6. 清理ObjectURL避免内存泄漏 #

下载完成后释放创建的ObjectURL：

window.URL.revokeObjectURL(fileURL);

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