Error when downloading a large file using data link in javascript

Question

My webpage has a table containing around 10,000 rows. I converted the html table data to JSON object using tabletoJson npm package. Now to write this object in a json file and download the same, i am doing the following.

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);
});

When the table has rows around 8000 rows, the json file is getting downloaded. but when it goes above 10000 rows, json file is failing to download due to lots of data getting appended in the url itself as I think it also has a specific limit.

Please suggest alternative for this json download.

Answer 1

You can use URL.createObjectURL api to create virtual file links.

$("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;
});