IE浏览器msSaveBlob下载文件格式异常问题求助

嘿，我懂你现在的困扰——其他浏览器下载文件都正常，唯独IE里用msSaveBlob保存的文件打开时提示格式无效，咱们来快速搞定这个问题～

问题根源 #

你的代码里有个小疏漏：处理IE浏览器时，你把已经是Blob类型的this.response又包装进数组，重新创建了一个新的Blob对象。这一步完全没必要，甚至会破坏原Blob的二进制数据结构，直接导致文件损坏。

因为你已经设置了xhr.responseType = 'blob'，此时this.response本身就是一个完整、正确的Blob对象，直接用它就好，不需要二次包装。

修改后的核心代码 #

把IE兼容部分的代码改成下面这样：

if (window.navigator && navigator.msSaveBlob) {
    // 直接使用XHR返回的Blob对象，无需重新创建
    return navigator.msSaveBlob(this.response, fileName);
}

额外优化建议（可选） #

如果想让IE更精准地识别文件类型，可以从XHR的响应头里获取服务器返回的Content-Type（不过msSaveBlob大多时候能自动识别，加上更稳妥）：

if (window.navigator && navigator.msSaveBlob) {
    // 获取服务器返回的文件类型，默认用二进制流兜底
    const contentType = xhr.getResponseHeader('Content-Type') || 'application/octet-stream';
    // 依然直接使用原Blob对象，这里只是说明类型的获取方式
    return navigator.msSaveBlob(this.response, fileName);
}

完整修正后的代码 #

$(document).on('click', '.register-file-uploader-download-file', function () { 
    let $fileResultsItem = $(this).closest('.form-fields__file-results-item'); 
    const fileName = $fileResultsItem.find('.multiple-files-upload-item').data('filename'); 
    const fileUrl = $fileResultsItem.find('.multiple-files-upload-item').val(); 

    if (fileUrl.length > 0) { 
        var xhr = new XMLHttpRequest(); 
        xhr.onreadystatechange = function () { 
            if (this.readyState === 4 && this.status === 200) { 
                var url = window.URL || window.webkitURL; 
                let blobFileUrl = url.createObjectURL(this.response); 

                if (window.navigator && navigator.msSaveBlob) { 
                    // 修正：直接使用原Blob对象
                    return navigator.msSaveBlob(this.response, fileName); 
                } 

                const a = document.createElement('a'); 
                a.style.display = 'none'; 
                a.href = blobFileUrl; 
                a.download = `${fileName}`; 
                document.body.appendChild(a); 
                a.click(); 
                url.revokeObjectURL(blobFileUrl); 
            } 
        }; 
        xhr.open('GET', fileUrl); 
        xhr.responseType = 'blob'; 
        xhr.send(); 
    } 
});

为什么原来的代码会出错？ #

当你把一个Blob对象放进数组传递给Blob构造函数时，浏览器会把这个Blob对象转换成它的字符串表示（比如[object Blob]），而不是直接复制它的二进制数据。这样新创建的Blob里装的是一段无效文本，而非你要下载的文件的二进制内容，自然打开时会提示格式无效。

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