Download JSON object as a file from browser

by

This is how I solved it for my application:

HTML:
<a id="downloadAnchorElem" style="display:none"></a>

JS (pure JS, not jQuery here):

var dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(storageObj));
var dlAnchorElem = document.getElementById('downloadAnchorElem');
dlAnchorElem.setAttribute("href",     dataStr     );
dlAnchorElem.setAttribute("download", "scene.json");
dlAnchorElem.click();

In this case, storageObj is the js object you want to store, and “scene.json” is just an example name for the resulting file.

This approach has the following advantages over other proposed ones:

  • No HTML element needs to be clicked
  • Result will be named as you want it
  • no jQuery needed

I needed this behavior without explicit clicking since I want to trigger the download automatically at some point from js.

JS solution (no HTML required):

  function downloadObjectAsJson(exportObj, exportName){
    var dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(exportObj));
    var downloadAnchorNode = document.createElement('a');
    downloadAnchorNode.setAttribute("href",     dataStr);
    downloadAnchorNode.setAttribute("download", exportName + ".json");
    document.body.appendChild(downloadAnchorNode); // required for firefox
    downloadAnchorNode.click();
    downloadAnchorNode.remove();
  }

More Related Contents:

  1. How to insert into JSON?
  2. Convert XML to JSON (and back) using Javascript
  3. “SyntaxError: Unexpected token < in JSON at position 0"
  4. How do I iterate over a JSON structure? [duplicate]
  5. Is the order of elements in a JSON list preserved?
  6. jQuery.parseJSON throws “Invalid JSON” error due to escaped single quote in JSON
  7. JSON datetime between Python and JavaScript
  8. JSON.stringify() array bizarreness with Prototype.js
  9. How do I sort an array of objects based on the ordering of another array?
  10. in JSON, Why is each name quoted?
  11. How to stringify inherited objects to JSON?
  12. JSON.stringify deep objects
  13. How to inject HTML into a template with polymer
  14. Uncaught SyntaxError: Unexpected token u in JSON at position 0
  15. How to use Select2 with JSON via Ajax request?
  16. Not a Legal JSONP API — How to get data without CALLBACK parameter
  17. d3 js – loading json without a http get
  18. Encrypt string in PHP and decrypt in Node.js
  19. IE10/11 Ajax XHR error – SCRIPT7002: XMLHttpRequest: Network Error 0x2ef3
  20. TypeError: Converting circular structure to JSON in nodejs
  21. How to parse JSON easily?
  22. Safely parsing a JSON string with unquoted keys
  23. jQuery uses (new Function(“return ” + data))(); instead of eval(data); to parse JSON, why?
  24. Why JSON allows only string to be a key?
  25. How to add local json file in jsfiddle?
  26. Rename Object Key in an array using javascript
  27. Ordered JSONObject
  28. Load static JSON file in Webpack
  29. Grouping JSON by values
  30. Iterate through nested json object array

Leave a Comment