使用javascript中的数据链接下载大文件时出错

Question

我的网页有一个包含大约10,000 行的表格。我使用tabletoJson npm 包将 html 表数据转换为 JSON 对象。现在要将这个对象写入json 文件并下载相同的文件，我正在执行以下操作。

HTML

<a id="json_gene" href="" download="tgen_json.json">
  <button id="bmss" type="button" class="btn btn-primary exscel">Download Json</button>
</a>

JS

$("body").on("click", "#json_gene", function () {
  var table = $('#data_table').tableToJSON();
  table = {"data": table};
  table = JSON.stringify(table)
  this.href = "data:text/plain;charset=UTF-8,"  + encodeURIComponent(table);
});

当表有大约 8000 行时，json 文件正在下载。但是当它超过 10000 行时，由于在 url 中附加了大量数据，j son 文件无法下载，因为我认为它也有特定限制。

请为此json下载建议替代方案。

Answer 1

您可以使用URL.createObjectURLapi 创建虚拟文件链接。

$("body").on("click", "#json_gene", function() {
  var blobPart = [$('#data_table').tableToJSON()];
  var blob = new Blob(blobPart, {
    type: "application/octet-stream"
  });
  var urlObj = URL.createObjectURL(blob);
  this.href = urlObj;
});