Zapisz ciąg jsonów na komputerze klienckim (przy użyciu interfejsu API HTML5)

Question

Przeczytałem kilka starszych wątków o tym samym, ale ostatnio interfejs API pliku znacznie się zmienił. Moim wymaganiem jest zapisanie pliku json (dane są lokalnie w indexdDB, ale potrzebuję sposobu na utworzenie kopii zapasowej). Odkąd używam indexdDB, wybieram tylko ostatnie przeglądarki, głównie chrome. Czy możliwe jest zapisanie danych (ciąg jsonów) na komputerze klienckim?

Widziałem http://eligrey.com/demos/FileSaver.js/, ale czy istnieje sposób, aby to zrobić natywnie?

Dzięki.

Answer 1

Można użyć Blob i funkcji HTML5 a[download] aby zapewnić pobieranie kopii zapasowej JSON:

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"; 

Oto jsfiddle przykład: http://jsfiddle.net/potatosalad/yuM2N/

Answer 2

Tak, możesz. Zakłada się, że masz json w text:

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

który jest niesprawdzone, ale powinno działać.

Answer 3

podstawie potatosalad answer i eksperymentował z 'ja' aktualizacją 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"); 

funkcja potrzebuje wywołującego elementu a jako pierwszego argumentu.
niż aktualizuje cel href do nowego obiektu typu blob.

Answer 4

Można użyć FileSaver.js.

Przykładowy kod:

//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"); 

Zastosowanie JSON.stringify aby utworzyć ciąg z JSON.

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