Laden Sie das JSON-Objekt als Datei aus dem Browser herunter

Ich habe den folgenden Code, mit dem Benutzer Datenzeichenfolgen in einer CSV-Datei herunterladen können.

exportData="data:text/csv;charset=utf-8,";
exportData += 'some csv strings';
encodedUri = encodeURI(exportData);
newWindow = window.open(encodedUri);

Es funktioniert einwandfrei, wenn der Client den Code ausführt, generiert er eine leere Seite und beginnt mit dem Herunterladen der Daten in der CSV-Datei.

Also habe ich versucht, dies mit JSON-Objekten wie zu tun

exportData="data:text/json;charset=utf-8,";
exportData += escape(JSON.stringify(jsonObject));
encodedUri = encodeURI(exportData);
newWindow = window.open(encodedUri);

Aber ich sehe nur eine Seite mit den darauf angezeigten JSON-Daten und lade sie nicht herunter.

Ich habe einige Nachforschungen angestellt und diese behauptet zu funktionieren, aber ich sehe keinen Unterschied zu meinem Code.

Übersehe ich etwas in meinem Code?

Danke, dass du meine Frage gelesen hast 🙂

So habe ich es für meine Anwendung gelöst:

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

JS (reines JS, hier nicht jQuery):

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 diesem Fall, storageObj ist das js-Objekt, das Sie speichern möchten, und „scene.json“ ist nur ein Beispielname für die resultierende Datei.

Dieser Ansatz hat die folgenden Vorteile gegenüber anderen vorgeschlagenen:

• Es muss kein HTML-Element angeklickt werden
• Das Ergebnis wird nach Ihren Wünschen benannt
• kein jQuery erforderlich

Ich brauchte dieses Verhalten ohne explizites Klicken, da ich den Download irgendwann automatisch von js auslösen möchte.

JS-Lösung (kein HTML erforderlich):

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

Antwort gefunden.

var obj = {a: 123, b: "4 5 6"};
var data = "text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(obj));

$('<a href="https://stackoverflow.com/questions/19721439/data:" + data + '" download="data.json">download JSON</a>').appendTo('#container');

scheint bei mir gut zu funktionieren.

** Alle Anerkennung geht an @cowboy-ben-alman, der der Autor des obigen Codes ist **

Sie könnten versuchen, Folgendes zu verwenden:

• die nativen JavaScript-APIs Klecks Konstrukteur u
• der FileSaver.js saveAs() Methode

Sie müssen sich überhaupt nicht mit HTML-Elementen befassen.

var data = {
    key: 'value'
};
var fileName="myData.json";

// Create a blob of the data
var fileToSave = new Blob([JSON.stringify(data)], {
    type: 'application/json'
});

// Save the file
saveAs(fileToSave, fileName);

Wenn Sie den JSON gemäß dieser Antwort hübsch drucken möchten, können Sie Folgendes verwenden:

JSON.stringify(data,undefined,2)

Dies wäre eine reine JS-Version (angepasst von Cowboys):

var obj = {a: 123, b: "4 5 6"};
var data = "text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(obj));

var a = document.createElement('a');
a.href="https://stackoverflow.com/questions/19721439/data:" + data;
a.download = 'data.json';
a.innerHTML = 'download JSON';

var container = document.getElementById('container');
container.appendChild(a);

http://jsfiddle.net/sz76c083/1

Folgendes hat bei mir funktioniert:

/* function to save JSON to file from browser
* adapted from http://bgrins.github.io/devtools-snippets/#console-save
* @param {Object} data -- json object to save
* @param {String} file -- file name to save to 
*/
function saveJSON(data, filename){

    if(!data) {
        console.error('No data')
        return;
    }

    if(!filename) filename="console.json"

    if(typeof data === "object"){
        data = JSON.stringify(data, undefined, 4)
    }

    var blob = new Blob([data], {type: 'text/json'}),
        e    = document.createEvent('MouseEvents'),
        a    = document.createElement('a')

    a.download = filename
    a.href = window.URL.createObjectURL(blob)
    a.dataset.downloadurl =  ['text/json', a.download, a.href].join(':')
    e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
    a.dispatchEvent(e)
}

und es dann so zu nennen

saveJSON(myJsonObject, "saved_data.json");

Einfache, saubere Lösung für diejenigen, die nur auf moderne Browser abzielen:

function downloadTextFile(text, name) {
  const a = document.createElement('a');
  const type = name.split(".").pop();
  a.href = URL.createObjectURL( new Blob([text], { type:`text/${type === "txt" ? "plain" : type}` }) );
  a.download = name;
  a.click();
}

downloadTextFile(JSON.stringify(myObj), 'myObj.json');

Ich musste kürzlich eine Schaltfläche erstellen, die eine JSON-Datei mit allen Werten eines großen Formulars herunterlädt. Ich brauchte dies, um mit IE/Edge/Chrome zu arbeiten. Folgendes habe ich getan:

function download(text, name, type)
    {
        var file = new Blob([text], {type: type});
        var isIE = /*@cc_on!@*/false || !!document.documentMode;
        if (isIE)
        {
            window.navigator.msSaveOrOpenBlob(file, name);
        }
        else
        {
            var a = document.createElement('a');
            a.href = URL.createObjectURL(file);
            a.download = name;
            a.click();
        }
     }

download(jsonData, 'Form_Data_.json','application/json');

Es gab ein Problem mit dem Dateinamen und der Erweiterung in Edge, aber zum Zeitpunkt des Schreibens schien dies ein Fehler mit Edge zu sein, der behoben werden soll.

Hoffe, das hilft jemandem