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中是不可变的，对于有特权的人来说，这意味着它们的创建是最终的，您无法修改字符串或将其追加到字符串中，您必须为每次更改创建一个新的字符串。 url对字符串进行编码的encodeURIComponent可能会进行成千上万的更改，从而根据字符串的内容转义大于1mb的字符串。 即使您使用了需要转义的零个字符，当您调用该函数并将其附加到'data:text/plain;charset=utf-8,'字符串后，它也会根据这两个字符串创建一个新的字符串，有效使该操作所需的内存增加一倍。

取决于特定浏览器如何使用此功能，它根本没有针对长字符串进行优化，因为大多数浏览器的url字符限制为〜2000个字符（通常为2048个），因此浏览器中的实现可能执行得不尽人意。级别逃生。 如果此函数确实是罪魁祸首，则您将不得不寻找另一种方法来uri转义您的字符串。 可能是库或自定义的低级别转义。

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

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

Answer 2

当我将Rickey的答案标记为正确的答案时，因为它使我获得了正确的答案，但我发现了以下解决方法：

没有链接的JavaScript Blob文件名

由于Chrome对URI长度的限制，此链接上可接受的答案能够处理8MB以上的数据，而数据URI能够处理2MB的数据。