如何在 Internet Explorer 中删除 Blob？答案

【问题标题】：How can I delete a Blob in Internet Explorer?如何在 Internet Explorer 中删除 Blob？
【发布时间】：2020-05-25 23:15:02
【问题描述】：

我正在使用

$.ajax({
            url: '/search',
            data: $('form').serialize(),
            type: 'POST',
            async: true,
            // process the response from the backend
            success: function(response) {
                console.log(response);
                if (response.search_text !== "") {
                    $('#search_result_text').html("Your search " + "<font color='red'>" + response.search_text +
                        "</font>" + " in category " + "<font color='red'>" + response.category + "</font>" +
                        " has " + "<font color='red'>" + response.amount_hits_search_text + "</font>" + " hits in:")
                    $('#hits_document').html("all documents: " + "<font color='red'>" +
                        response.amount_hits_document_total + "</font>" + "<br>" + "mgmt. documents: " +
                        "<font color='red'>" + response.amount_hits_documents_mgmt + "</font>")

                    export_csv.style.visibility = "visible";
                }

                // function to export all hit results
                $('#export_csv').click(function() {
                    console.log("trying to download")

                    var blob = new Blob([response.csv], {
                        type: "text/csv;charset=utf-8;"
                    });

                    if (navigator.msSaveBlob) { // IE 10+
                        navigator.msSaveBlob(blob, response.search_text + " " + response.category + ".csv")

                    } else {
                        var link = document.createElement("a");
                        if (link.download !== undefined) { // feature detection
                            // Browsers that support HTML5 download attribute
                            var url = URL.createObjectURL(blob);
                            link.setAttribute("href", url);
                            link.setAttribute("target", "_blank")
                            link.setAttribute("download", "fileName.csv");
                            link.style = "visibility:hidden";
                            document.body.appendChild(link);
                            link.click();
                            document.body.removeChild(link);
                            link.removeChild()
                            URL.revokeObjectURL(url)
                        }
                    }
                })

            )}
)}

为 Internet Explorer 创建一个 blob。

“export_csv”按钮会生成一个 CSV，之后我可以下载它。但我意识到，blob 并没有被“覆盖”。当我创建了 3 个 CSV 文件并每次点击下载它们时，第四个 CSV 和点击将导致下载所有以前的 3 个 CSV/blob 文件！

如何在下载后删除每个 blob？

提前谢谢你。

【问题讨论】：

你能显示更多相关的代码吗？ How is blobby formed?
@ChrisG Blob 文件是来自 Ajax 响应的 csv
那么您肯定 Ajax 响应没有问题吗？你是如何在那里创建 CSV 文件的？请显示更多代码，我们无法为您提供这么少的信息。
@ChrisG 是的，响应非常好。下载的 CSV 罚款很好（utf-8 等）每个 Ajax 响应我都会得到另一个 CSV 文件，我将其下载为 blob。对于非 Internet Explorer 部分，有 URL.revokeObjectURL(url) 方法。我正在寻找类似的东西让 Internet Explorer 在下载后删除 blob。
问题是你一直在调用$('#export_csv').click(...)，添加一个新的事件监听器，因此每次ajax请求完成时都会对按钮进行新的下载。因此，在您第二次搜索后，单击该按钮将触发两次下载。然后三个。等等。这不是关于删除 blob，而是关于在页面加载时只分配一次点击处理程序并仅更新下载的内容。

标签： javascript internet-explorer blob

【解决方案1】：

@ChrisG 的大道具。

我可以简单地通过添加 $("#export_csv").off("click");在 ajax 请求之前。

【讨论】：

感谢您发布此问题的解决方案。我建议您在可以标记的 48 小时后尝试将自己的答案标记为该问题的已接受答案。它可以在未来帮助其他社区成员解决类似的问题。感谢您的理解。