Js 下载大文件Error: Network Error

TomCat0916

已于 2023-03-07 15:13:48 修改

阅读量1.6k

点赞数

分类专栏：问题汇总文章标签： js

于 2023-03-07 15:09:48 首次发布

本文链接：https://blog.csdn.net/TomCat0916/article/details/129382194

版权

问题汇总专栏收录该内容

22 篇文章 0 订阅

订阅专栏

文章描述了一个在使用Js下载大文件时遇到的NetworkError问题，特别是在某些浏览器上。问题出现在文件超过10M时，下载中断。问题与axios库、POST请求和blob响应类型有关。作者通过排查，发现将responseType从blob改为arraybuffer可以解决问题。

摘要由CSDN通过智能技术生成

Js 下载大文件Error: Network Error

一、问题

现象

	同一个下载接口在某些浏览器上执行下载时，小文件可以正常下载无异常，当文件超过10M时会下载中断并提示NetWork Error。在高版本Chrome浏览器（110.0.5481.178（正式版本） （64 位））上无异常。

日志

Error: Network Error
    at e.exports (axios.min.js:8)
    at XMLHttpRequest.d.onerror (axios.min.js:8)

环境

1、axios版本0.18.1
2、下载接口请求方式POST.
3、.response类型 ‘blob’
4、下载保存实现：

const blob = new Blob([res.data])
  if (window.navigator.msSaveOrOpenBlob) {
    navigator.msSaveBlob(blob, fileName)
  } else {
    const link = document.createElement('a')
    link.download = decodeURI(fileName)
    link.href = URL.createObjectURL(blob)
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    URL.revokeObjectURL(link.href)
  }

二、解决方案

将.responseType 改成 arraybuffer

三、排查过程

1、首先定位浏览器版本不同导致问题，排除接口限制和下载代码逻辑导致问题
2、排除axios版本导致问题，升级axios至最新版本后重新运行，发现问题依然存在。
3、百度问题日志，网上说是跨域或者请求方式不同导致问题。后台在接口上添加跨域处理，问题依然存在；修改接口请求方式为GET，问题依然存在。排除以上两种方式导致问题。
4、无意中将responseType 改成 arraybuffer，后问题解决