华为手机浏览器及iOS10以下saveAs下载Blob文件失败求助

我之前踩过类似的兼容大坑，旧iOS系统和部分国产浏览器对Blob的处理确实有不少特殊情况，结合你的代码和场景，给你几个针对性的解决方案：

方案1：针对iOS10及以下的Blob转Data URL兼容处理 #

iOS10及以下的WebKit内核不支持直接通过saveAs下载Blob，需要把Blob转换成Data URL，再通过a标签触发下载。可以先判断系统版本，再做适配：

import { saveAs } from 'file-saver';

function isIOS10OrBelow() {
  const iosVersion = navigator.userAgent.match(/OS (\d+)_(\d+)_?(\d+)?/);
  return iosVersion && parseInt(iosVersion[1], 10) <= 10;
}

myPromise.then(data => {
  let blob = new Blob([data], { type: 'application/pdf' });
  
  if (isIOS10OrBelow()) {
    // 转成Data URL
    const reader = new FileReader();
    reader.onload = function(e) {
      const a = document.createElement('a');
      a.href = e.target.result;
      a.download = 'fileName.pdf';
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    };
    reader.readAsDataURL(blob);
  } else {
    saveAs(blob, 'fileName.pdf');
  }
});

方案2：华为浏览器的原生a标签替代方案 #

部分国产浏览器对FileSaver的saveAs API支持不佳，可以直接使用原生URL.createObjectURL结合a标签来实现下载，同时记得清理URL对象避免内存泄漏：

myPromise.then(data => {
  let blob = new Blob([data], { type: 'application/pdf' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  
  a.href = url;
  a.download = 'fileName.pdf';
  // 针对部分浏览器需要设置target="_blank"
  a.target = '_blank';
  
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  
  // 延迟释放URL对象，确保下载完成
  setTimeout(() => {
    URL.revokeObjectURL(url);
  }, 100);
});

方案3：改用XMLHttpRequest获取Blob（避免fetch的兼容问题） #

如果你的myPromise是基于fetch实现的，部分旧环境对fetch返回的Response转Blob存在兼容问题，可以换成XMLHttpRequest来获取文件流：

function downloadPDF() {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', '你的接口地址', true);
  xhr.responseType = 'blob'; // 直接指定返回类型为blob
  
  xhr.onload = function() {
    if (xhr.status === 200) {
      const blob = xhr.response;
      // 这里可以结合方案1或方案2的下载逻辑
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = 'fileName.pdf';
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      setTimeout(() => URL.revokeObjectURL(url), 100);
    }
  };
  
  xhr.send();
}

// 调用下载函数
downloadPDF();

额外注意事项 #

• 确保接口返回的data是正确的二进制流，有些情况下接口可能返回的是JSON格式的错误信息，需要先判断响应状态；
• 华为浏览器可能存在对下载行为的限制，比如需要用户主动触发（不能在异步回调外直接调用下载），确保你的下载逻辑是由用户点击事件触发的；
• 测试时尽量覆盖目标机型，有些国产浏览器的内核版本差异较大，可能需要微调代码。

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