jQuery 下载适用于 Chrome 而不是资源管理器答案

【问题标题】：jQuery download works in Chrome and not in ExplorerjQuery 下载适用于 Chrome 而不是资源管理器
【发布时间】：2019-10-19 04:59:32
【问题描述】：

我正在使用以下代码将文件下载到桌面：

    $('#resourceTable tbody').on( 'click', '#getFile', function () {

        var data = resourceTable.row( $(this).parents('tr') ).data();
        var a = document.createElement('a');
        a.href = data.resourseImage

        if (data.resourseImageType === "pdf"){
            a.download = 'myfile.pdf';
        }else{
            a.download = 'myfile.jpg';
        }

        document.body.append(a);
        a.click();
        a.remove();
    });

它适用于 Chrome。在资源管理器中，没有发生下载，并给出了控制台消息：

SCRIPT438: Object doesn't support property or method 'append'
resourceAdmin.js (559,10)

第 559 行是：

document.body.append(a);

我试过了：

$("document.body").append($(a));
a.click();
$(a).remove();

在 Chrome 中工作。在资源管理器（无错误）中，按钮变为蓝色；但是，下载弹出窗口没有出现。

【问题讨论】：

document.body.append(a); 在 IE 中不受支持，为此使用 polyfill 或使用 jQuery 中的任何类似方法，因为您已经在使用 jQuery，jQuery append
感谢 Code Manic。我试过 "$("document.body").append($(a));"这适用于 Chrome；但是，然后我在资源管理器中遇到了类似的错误“a.remove();”所以我将其替换为“$(a).remove();”。这适用于 Chrome；但是，在资源管理器中，没有错误，按钮变为蓝色；但是，不会显示下载弹出窗口。

标签： javascript jquery html

【解决方案1】：

IE 不支持这种方式下载。您应该首先将数据转换为 blob 并使用 IE 特定函数。在第 559 行之前。检查它是否是 IE 浏览器，并使用其他 IE 支持的方法下载，如下所示-

var blob = new Blob([data.resourseImage], {type:  "text/plain;charset=utf-8;"});
if (navigator.msSaveBlob) {
    return navigator.msSaveBlob(blob, fileName);
} else {
    $("document.body").append($(a));
    a.click();
    $(a).remove();
}

【讨论】：

嗨 Ashique，这是下载文件，是的；但是，无法读取 pdf 和 jpg 文件。我试过了：var blob = new Blob([data.resourseImage]); if (navigator.msSaveBlob) { if (data.resourseImageType === "pdf"){ blob = blob.slice(0, blob.size, "application/pdf") }else{ blob = blob.slice(0, blob.size, "image/jpeg") } return navigator.msSaveBlob(blob, fileName); } else { $("document.body").append($(a)); a.click(); $(a).remove(); }'
抱歉格式化，我无法正确格式化。
嗨 Ashique，msSaveBlob 是非标准的且已过时。请看：developer.mozilla.org/en-US/docs/Web/API/Navigator/msSaveBlob

【解决方案2】：

使用element.appendChild(newElement)；

或覆盖jquery追加

$('#resourceTable tbody').on( 'click', '#getFile', function () {

        var data = resourceTable.row( $(this).parents('tr') ).data();
        var a = document.createElement('a');
        a.href = data.resourseImage

        if (data.resourseImageType === "pdf"){
            a.download = 'myfile.pdf';
        }else{
            a.download = 'myfile.jpg';
        }

        if (navigator.userAgent.search("Edge") > -1) {
            document.body.append = document.body.appendChild;              
        }

        document.body.append(a); // or use appendChild
        a.click();
        a.remove();
    });

【讨论】：

嗨拉维，谢谢。请问这个和其他代码有什么关系？
我试过你的代码，文件没有下载。按钮变为蓝色，没有错误消息。
navigator.userAgent.search("Edge") 可能因您的浏览器而异。你应该先检查控制台navigator.userAgent

【解决方案3】：

我现在找到了，它适用于 Chrome 和 IE：

http://danml.com/download.html

亲切的问候，

格林

【讨论】：