IE浏览器，文件下载失败，onDownloadProgress方法里报错：无法获取未定义或null引用的属性“getResponseheader“-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42289279/article/details/138181696

文章讲述了在不同浏览器中处理XML请求时，遇到在IE10及以下版本中progressEvent.srcElement为null的问题。通过使用progressEvent?.target?.getResponseHeader(x-content-length)解决了这个问题，同时提到在开启gzip压缩后，progressEvent.total和content-length不适用，应通过约定好的x-content-length字段获取文件总大小以保证进度条准确性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题背景：

谷歌、火狐、edge都没有问题，ie11浏览器也没有问题，ie10及以下会报错，无法获取未定义或null引用的属性"getResponseheader

查看代码，getResponseHeader这个方法是在获取进度条的时候使用，

//xml返回数据的钩子函数，可以用来获取数据的进度 具体可查看axios的官网
onDownloadProgress: progressEvent => {
    //progressEvent.loaded 下载文件的当前大小
    //progressEvent.total  下载文件的总大小 如果后端没有返回 请让他加上！
    let progressBar = Math.round((progressEvent.loaded / progressEvent.srcElement.getResponseHeader('x-content-length')) * 100);
    // ...其他逻辑操作
}

在ie10浏览器下，控制台打印 progressEvent 对象，发现 progressEvent.srcElement 为null，其他版本的浏览器 progressEvent.srcElement 是有值的，并且可以通过 getResponseHeader() 获取到响应头里的值。

修改后：使用 progressEvent?.target?.getResponseHeader() 方法获取，x-content-length需要后端接口设置在响应头中。问题解决

let progressBar = Math.round((progressEvent.loaded / progressEvent?.target?.getResponseHeader('x-content-length')) * 100);

这里说一下为什么不使用 progressEvent.total 或者 content-length 来获取下载文件的总大小？

因为当开启了gzip之后，这两个值是有问题的。影响进度条的准确性，可以和后台约定好一个字段，比如 x-content-length 返回文件总大小，然后通过 progressEvent.target.getResponseHeader('x-content-length') 方法获取就行了。

问题解决。