'Save json string to client pc (using HTML5 API)

I read few older thread about the same, but seen the file API changed a lot recently. My requirement is to save a json file (data is locally in indexdDB, but I need a way to back it up). Since I use indexdDB, I only target recent browsers, mainly chrome. So, it it possible to save data (json string) to client computer?

I have seen http://eligrey.com/demos/FileSaver.js/ , but is there a way to do it natively?

Thanks.

javascripthtml


Solution 1:[1]

You can use a Blob and the HTML5 a[download] feature to provide a JSON backup download:

var data = {a:1, b:2, c:3};
var json = JSON.stringify(data);
var blob = new Blob([json], {type: "application/json"});
var url  = URL.createObjectURL(blob);

var a = document.createElement('a');
a.download    = "backup.json";
a.href        = url;
a.textContent = "Download backup.json";

Here is a jsfiddle example: http://jsfiddle.net/potatosalad/yuM2N/

Solution 2:[2]

Yes, you can. This assumes that you have the json in text:

var toDownload=new Blob([text],{type:'x-whatever/x-backup'});
var link=window.URL.createObjectURL(toDownload);
window.location=link;

that is untested, but it should work.

Solution 3:[3]

You can use FileSaver.js.

Sample code:

//include the js file in html.
<script src="FileSaver.min.js"></script>    

// other code ...

//use it here.
var myjson= "{a:3, b:4}";
var blob = new Blob([myjson], {type: "application/json"});

var saveAs = window.saveAs;
saveAs(blob, "my_outfile.json");

Use JSON.stringify to create a string from JSON.

Fiddle: https://jsfiddle.net/9w9ofec4/3/

Solution 4:[4]

based on potatosalad answer i experimented with an 'self' updating link:
jsfiddle

function saveAsFile(link, content, filename) {
    var blob = new Blob([content], {type: "text/text"});
    var url  = URL.createObjectURL(blob);

    // update link to new 'url'
    link.download    = filename + ".txt";
    link.href        = url;
}

saveAsFile(this, "YourContent", "HelloWorldFile");

the function saveAsFile() needs the calling a element as first argument.
than it updates the href target to the new blob.

Solution 5:[5]

function saveAsJSON(data, name=Date.now()+'.json') {
  const a = document.createElement('a')
  a.download = name
  a.href = URL.createObjectURL(new Blob([JSON.stringify(data)], {type: 'application/json'}))
  a.click()
}

// https://stackoverflow.com/questions/62371219/chrome-stops-download-files-from-stackoverflow-snippets
saveAsJSON(['orange', 'banana', {name: 'apple'}])

Solution 6:[6]

To save the file with a custom name, you can create a hidden <a> element and then click on it. This method is used by FileSaver.js.

function download(name, text){
    var toDownload=new Blob([text],
        {type:'data:application/octet-stream'});
    var link = window.URL.createObjectURL(toDownload);
    var el = document.createElement("a");
    el.href = link;
    el.download = name;
    el.click();
    window.URL.revokeObjectURL(link);
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 potatosalad
Solution 2
Solution 3 Samuel Bushi
Solution 4 Community
Solution 5
Solution 6 Thor Lancaster

Related Questions