Javascript 为什么要将blob下载链接附加到文档正文？

我试图将一个表转换为csv文件，然后下载它，但在使用Blob下载csv文件时遇到了一个问题。我用来下载csv文件的代码片段是：

问题是csv文件没有以我指定给该文件的名称下载。它使用随机生成的名称，没有扩展名。下载后的文件名示例：43af43ac-7491-44ed-a779-a6c8f1972b1a

我可以通过删除append（）remove（）函数来解决这个问题。因此，我有两个问题：

1-为什么会出现问题，最佳解决方案是什么

2-为什么要将元素附加到HTML的主体中？为什么代码在删除后仍然有效

1-问题发生的原因

这是一个bug，我无法在macOS上的任何浏览器上重现

，最佳解决方案是什么

最好的解决方案是让你的浏览器供应商知道他们有一个bug，然后你可以尝试在调用

document.body.removeChild（elem）之前增加延迟，以便（异步）下载可以在处理元素之前开始。

一种常见的做法是在执行此操作之前等待相当长的时间，这也是撤销您创建的blob://URL的好地方，否则将阻止GC收集blob的数据，一旦删除元素并丢失URL的任何跟踪，将导致真正的内存泄漏

所以这会给你一些

elem.click();        
setTimeout( () => {
  document.body.removeChild(elem);
  URL.revokeObjectURL(elem.href);
}, 1e4); // 10s should be enough in most cases

2-为什么要将元素附加到HTML的主体中

因为在某些浏览器中（Firefox<70）

为什么代码在删除后仍然有效

也就是说，只有那些试图修复浏览器错误的人才能告诉你

1-问题发生的原因

这是一个bug，我无法在macOS上的任何浏览器上重现

，最佳解决方案是什么

最好的解决方案是让你的浏览器供应商知道他们有一个bug，然后你可以尝试在调用
document.body.removeChild（elem）之前增加延迟，以便（异步）下载可以在处理元素之前开始。

一种常见的做法是在执行此操作之前等待相当长的时间，这也是撤销您创建的blob://URL的好地方，否则将阻止GC收集blob的数据，一旦删除元素并丢失URL的任何跟踪，将导致真正的内存泄漏

所以这会给你一些

elem.click();        
setTimeout( () => {
  document.body.removeChild(elem);
  URL.revokeObjectURL(elem.href);
}, 1e4); // 10s should be enough in most cases

2-为什么要将元素附加到HTML的主体中

因为在某些浏览器中（Firefox<70）

为什么代码在删除后仍然有效

只有那些试图修复浏览器错误的人才能告诉你。
谢谢@kaido。我正在使用谷歌浏览器的最新版本。我会尽快给他们办一张票。对于10秒的延迟，你不觉得等待的时间很长吗？谢谢你提到“过去是需要的”。我花了很多时间搜索它。谢谢@kaido。我正在使用谷歌浏览器的最新版本。我会尽快给他们办一张票。对于10秒的延迟，你不觉得等待的时间很长吗？谢谢你提到“过去是需要的”。我花了很多时间寻找它。