谷歌浏览器 文件下载提示网络错误

情况描述：

1. 谷歌版本：129.0.6668.90 (正式版本) （64 位） (cohort: Control)
2. 其他浏览器，比如火狐没有问题，但是谷歌会下载失败，故推断为谷歌浏览器导致的问题
3. 小文件比如1、2M会成功，大概10M以上会下载失败
4. 偶发，有些电脑的谷歌不会，有些会

尝试办法

• 比如让后端返回流的长度，但是后端给的方案是下载是封装的，不可行
• 让后端返回下载地址再下载，不过这样会导致存储很多无用文件，不可行
• 出现问题换个浏览器尝试，会导致用户体验感变差，不可行

解决办法

问题出现的时候一直在排查原因，网上给的资料也比较少，据说是谷歌124之后出现的问题，所以花费了比较长的时间，但是最后将blob换成arraybuffer，成功了，也测试了以下其他浏览器，没有兼容问题，大致解决方法如下：

// api 方法
export function downFile(data?: Object) {
    return request({
        url: 'api地址',
        method: 'post',
        // 谷歌对blob流有大小显示，使用arraybuffer
        responseType: 'arraybuffer',
        data,
    })
}

下载arraybuffer流：

export function downArraybufferFile(response: any, fileName: string) {
  // 处理返回的文件流
  const arraybuffer = response;
  if (arraybuffer && arraybuffer.size === 0) {
    useMessage().error('内容为空，无法下载');
    return;
  }
  const link = document.createElement('a');
  
  var binaryData = [] as any;
  binaryData.push(response);
  link.href = window.URL.createObjectURL(new Blob(binaryData, { type: 'arraybuffer' }));
  link.download = fileName;
  document.body.appendChild(link);
  link.click();
  window.setTimeout(function () {
    URL.revokeObjectURL(arraybuffer);
    document.body.removeChild(link);
  }, 0);
}

参考文章

https://blog.csdn.net/qq_45599738/article/details/134467853
https://blog.csdn.net/u012190388/article/details/130142638
https://blog.csdn.net/qq_45599738/article/details/134467853
https://blog.csdn.net/weixin_42651102/article/details/107118661