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, eine leere Seite generiert und die Daten in die CSV-Datei herunterlädt.

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

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

Ich sehe jedoch nur eine Seite mit den darauf angezeigten JSON-Daten, ohne sie herunterzuladen.

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

Vermisse ich etwas in meinem Code?

Danke, dass du meine Frage gelesen hast :)

So habe ich es für meine Bewerbung 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 storageObjhandelt es sich um 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 so benannt, wie Sie es möchten
• Keine 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();
  }

Ich habe eine Antwort gefunden.

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

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

scheint für mich gut zu funktionieren.

** Alle Gutschriften gehen an @ cowboy-ben-alman, der der Autor des obigen Codes ist **

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 = 'data:' + data;
a.download = 'data.json';
a.innerHTML = 'download JSON';

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

http://jsfiddle.net/sz76c083/1

Sie könnten versuchen, Folgendes zu verwenden:

• der Blob- Konstruktor der nativen JavaScript-API und
• die 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',
    name: fileName
});

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

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

JSON.stringify(data,undefined,2)

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 dann so zu nennen

saveJSON(myJsonObject, "saved_data.json");

Ich musste kürzlich eine Schaltfläche erstellen, mit der eine JSON-Datei mit allen Werten eines großen Formulars heruntergeladen werden konnte. Ich brauchte dies, um mit IE / Edge / Chrome zu arbeiten. Das 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 Dateiname und Erweiterung in Edge, aber zum Zeitpunkt des Schreibens schien dies ein Fehler mit Edge zu sein, der behoben werden soll.

Hoffe das hilft jemandem

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

Die downloadEigenschaft von Links ist neu und wird in Internet Explorer nicht unterstützt (siehe Kompatibilitätstabelle hier ). Eine browserübergreifende Lösung für dieses Problem finden Sie in FileSaver.js

Reagieren : Fügen Sie dies an der gewünschten Stelle in Ihre Rendermethode ein.

• Objekt im Status :

<a
  className="pull-right btn btn-primary"
  style={{ margin: 10 }}
  href={`data:text/json;charset=utf-8,${encodeURIComponent(
  JSON.stringify(this.state.objectToDownload)
  )}`}
  download="data.json"
>
  DOWNLOAD DATA AS JSON
</a>

• Objekt in Requisiten :

<a
  className="pull-right btn btn-primary"
  style={{ margin: 10 }}
  href={`data:text/json;charset=utf-8,${encodeURIComponent(
  JSON.stringify(this.props.objectToDownload)
  )}`}
  download="data.json"
>
  DOWNLOAD DATA AS JSON
</a>

Klassenname und Stil sind optional. Ändern Sie den Stil entsprechend Ihren Anforderungen.

Versuchen Sie, einen anderen MIME-Typ festzulegen: exportData = 'data:application/octet-stream;charset=utf-8,';

Es können jedoch Probleme mit dem Dateinamen im Dialogfeld "Speichern" auftreten.

Wenn Sie ein Konsolen-Snippet (Raser) anstelle eines Dateinamens bevorzugen, können Sie dies tun:

window.open(URL.createObjectURL(
    new Blob([JSON.stringify(JSON)], {
      type: 'application/binary'}
    )
))