jQuery文件下载功能在Chrome正常但IE失效的技术求助

我来帮你搞定这个IE里的下载问题，咱们先理清楚问题出在哪：

第一个错误的原因 #

你最开始用的document.body.append()是ES2015才新增的DOM方法，IE完全不支持这个方法，所以会抛出Object doesn't support property or method 'append'的错误。

修改后仍不生效的原因 #

你改成$("document.body").append($(a))其实有两个小问题：

1. 选择器写错了，应该是$("body")而不是$("document.body")；
2. 就算修正了选择器，IE对<a>标签的download属性支持非常有限——尤其是当下载的资源是跨域URL或者非Blob对象时，click()事件根本不会触发下载行为。

兼容IE和现代浏览器的解决方案 #

我们需要针对IE做特殊处理，利用IE专属的msSaveOrOpenBlobAPI（IE10+支持），同时给现代浏览器保留原来的逻辑，还要把DOM操作换成IE支持的标准方法。

完整代码如下：

$('#resourceTable tbody').on('click', '#getFile', function () {
    var data = resourceTable.row($(this).parents('tr')).data();
    var fileUrl = data.resourseImage;
    var fileName = data.resourseImageType === "pdf" ? 'myfile.pdf' : 'myfile.jpg';

    // 检测是否是IE浏览器（包括Edge旧版）
    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        // IE下需要通过XHR获取文件Blob，再调用专属API下载
        var xhr = new XMLHttpRequest();
        xhr.open('GET', fileUrl, true);
        xhr.responseType = 'blob';
        xhr.onload = function () {
            if (xhr.status === 200) {
                var blob = xhr.response;
                // 调用IE的下载方法，第一个参数是Blob，第二个是文件名
                window.navigator.msSaveOrOpenBlob(blob, fileName);
            }
        };
        xhr.send();
    } else {
        // 现代浏览器（Chrome、Firefox、Edge新版等）的处理逻辑
        var a = document.createElement('a');
        a.href = fileUrl;
        a.download = fileName;
        // 用IE支持的appendChild代替append
        document.body.appendChild(a);
        a.click();
        // 对应用removeChild代替remove
        document.body.removeChild(a);
    }
});

代码关键点说明： #

• IE判断：通过window.navigator.msSaveOrOpenBlob来识别IE环境；
• IE下载逻辑：IE不支持通过a标签download属性下载远程URL，所以我们用XHR请求获取文件的Blob对象，再调用msSaveOrOpenBlob触发下载；
• DOM操作兼容：把append()换成IE支持的appendChild()，remove()换成removeChild()，保证所有浏览器都能正确添加/移除a标签。

这样修改后，Chrome等现代浏览器依然正常工作，IE里也能正常弹出下载窗口了。

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