javascript-本地生成和下载一个巨大的文件

我有以下JavaScript代码下载一个文件，我忍不住想我是从这里得到的：

然而，这个函数在Chrome中崩溃了，因为我试图下载太多的数据（可能是几MB，但对于低于1MB的下载来说似乎还可以。我还没有对它做很多度量）

我非常喜欢这个函数，因为它允许我从现有的巨大JavaScript变量创建一个字符串，并立即下载它

那么我的两个问题是：

A） 是什么导致了这次撞车？是字符串

text

的大小还是此函数中有什么内容？我读到60MB的字符串在JavaScript中是可能的，我认为我还没有达到这个目标

B） 如果是这个函数，有没有另一种简单的方法来下载一些巨大的ish文件，让我可以通过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);
}

---

它在其他浏览器中工作吗？尝试使用调试器并在函数内部设置断点，然后逐步执行

尝试通过创建一个包含要设置为href的字符串的变量来分解

元素.setAttribute

和数据内容，这样您可以看到更多的失败点

查看

encodeURIComponent

函数是否因大字符串而失败

字符串在javascript中是不可变的，对于那些有隐私的人来说，这意味着他们的创建是最终的，你不能修改字符串，也不能附加到字符串，你必须为每次更改创建一个新的字符串

encodeURIComponent

对字符串进行编码的url可能会根据字符串的内容对大于1mb的字符串进行数千次更改。即使您使用的是需要转义的零字符，当您调用该函数并将其附加到

”数据中时：text/plain；charset=utf-8，“

string，它将从这两个字符串创建一个新字符串，有效地将该操作所需的内存增加一倍

根据特定浏览器处理此函数的方式，它根本没有针对长字符串进行优化，因为大多数浏览器的url字符限制为~2000个字符（通常为2048个），因此浏览器中的实现可能没有进行低级别转义。如果这个函数确实是罪魁祸首，那么您必须找到另一种方法来对字符串进行uri转义。可能是库或自定义低级转义

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

---

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

虽然我将Rickey的答案标记为正确答案，因为它让我找到了正确的答案，但我发现了一个解决方法：

---

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

@GolezTrol你知道当Chrome给你一张小小的方脸，当页面背景变成深灰色蓝色时，你会说“他死了，吉姆！”或“哇，啪！”之类的话吗？啊，那种崩溃“对于低于1MB的下载，它似乎可以正常工作”--我来到这里，希望能为我的2GB下载找到答案…@JohnWeisz走进兔子洞，我发现：它可以帮助您在本地下载Gig数据：）谢谢-我将逐步完成此功能，看看它在什么时候中断（并在评论中进行更新）。我认为一定有一个一致的断点，因为函数在达到一定数据量之前运行相对较快（并且网站在达到该数据量的情况下按下下载按钮之前继续工作）。更新：崩溃实际上发生在

元素。单击（）

调用。我想知道URL的大小是否有问题。事实上，-2MB似乎是chrome中数据URI的限制，经过一些实验后，我注意到我的URL崩溃的次数大约是3MB。我将把你的标记为答案，因为它把我带到了正确的位置，但也许要加上URI的大小才是问题所在。抢手货我没有想到在使用数据前缀的情况下，URI限制会起作用，但它确实非常有意义。