javascript-在本地生成和下载大文件

Question

我有以下JavaScript代码可以下载文件，但我不禁觉得自己是从这里下载的：在内存中创建文件供用户下载，而不是通过服务器下载

但是，此功能在Chrome中崩溃，因为我尝试下载过多的数据（它可能只有几MB，但对于1 MB以下的下载来说似乎工作正常。我还没有对其进行很多度量）。

我真的很喜欢这个函数，因为它可以让我根据现有的巨大JavaScript变量创建一个字符串，然后立即下载它。

所以我的两个问题是：

A）是什么原因导致飞机坠毁？它是字符串的大小text还是此函数中有内容？我读到在JavaScript中可以使用60MB的字符串，但我认为我还没有达到这个目标。

B）如果是此功能，是否有另一种简单的方法可以下载一些庞大的文件，使我可以通过JavaScript在本地生成内容？

function download(filename, text) {
  var element = document.createElement('a');
  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
  element.setAttribute('download', filename);

  element.style.display = 'none';
  document.body.appendChild(element);
  element.click();
  document.body.removeChild(element);
}

Answer 1

它可以在其他浏览器中使用吗？尝试使用调试器并在函数内部设置断点并单步执行。

尝试通过创建一个包含要设置为 href 的字符串的 var 来分解element.setAttribute数据内容，这样您就可以看到更多故障点。

查看该encodeURIComponent函数是否因大字符串而失败。

字符串在 JavaScript 中是不可变的，对于那些知情的人来说，这意味着它们的创建是最终的，您不能修改字符串，也不能追加字符串，您必须为每次更改创建一个新字符串。encodeURIComponent哪个 url 对字符串进行编码可能会进行数千次更改，转义 > 1mb 字符串，具体取决于字符串的内容。即使您使用需要转义的零个字符，当您调用该函数然后将其附加到字符串时'data:text/plain;charset=utf-8,'，它也会从这两个字符创建一个新字符串，从而有效地使该操作所需的内存加倍。

根据特定浏览器处理此功能的方式，它根本没有针对长字符串进行优化，因为大多数浏览器的 url 字符限制为 ~2000 个字符（通常为 2048 个），那么浏览器中的实现很可能不会做得太低级别逃脱。如果这个函数确实是罪魁祸首，你将不得不找到另一种方法来转义你的字符串。可能是图书馆或自定义的低级逃生。

如果调试器显示这个函数不是问题，那么明显的另一个瓶颈是当你将这个巨大的链接附加到 dom 时，浏览器可能会在尝试处理这个命令时冻结，为此它可能需要一个完全不同的解决方案到你的下载问题。

尽管这只是猜测，但希望它能引导您走向正确的方向。