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

Lesezeit: 7 Minuten

Laden Sie das JSON Objekt als Datei aus dem Browser herunter
Eugen Yu

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 🙂

1645705510 868 Laden Sie das JSON Objekt als Datei aus dem Browser herunter
Wolzotan

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

  • Dies ist die einzige Lösung, die für mehr als =~ 2000 Datenzeichen funktioniert. Weil Sie Daten vorangestellt haben:

    – rjurney

    1. Februar 2016 um 21:23 Uhr

  • Kann mir jemand auf eine Spezifikations- oder MDN-Seite verweisen, die ausführlicher erklärt, wie diese ganze Sache mit dem vorangestellten Datentyp funktioniert, dh. “data:text/json;charset=utf-8”? Ich benutze das, aber es fühlt sich an wie Magie, es wäre großartig, die Details zu lesen, aber ich weiß nicht einmal, wie ich danach googeln soll.

    – Seitenwinder

    25. Juli 2016 um 20:02 Uhr

  • Dies funktioniert jedoch nicht im IE, wenn Sie eine große Datei mit mehr als 2000 Zeichen herunterladen müssen.

    – Benutzer388969

    16. Februar 2017 um 15:38 Uhr

  • Ohne Grenzen wird das aber nicht funktionieren. Sie können nur etwa 1 MB Daten herunterladen. Zum Beispiel, var storageObj = []; for (var i=0; i<1000000; ++i) storageObj.push('aaa'); gibt “Download fehlgeschlagen – Netzwerkfehler” in Chrome 61

    – Oseiskar

    1. November 2017 um 12:19 Uhr

  • @YASHDAVE verwenden JSON.stringify(exportObj, null, 2) stattdessen

    – TryingToImprove

    8. Mai 2018 um 8:43 Uhr

Laden Sie das JSON Objekt als Datei aus dem Browser herunter
Eugen Yu

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 **

  • @Cybear kannst du mir die dritte Zeile erklären?

    – Rahul Khatri

    4. Mai 2015 um 11:12 Uhr

  • Sie sollten data: Ihrer URL voranstellen, da der Benutzer sonst in vielen Browsern wahrscheinlich auf eine Zeichenbeschränkung von 2000 stößt.

    – rjurney

    1. Februar 2016 um 21:24 Uhr

  • Hey, ich weiß, es ist eine alte Antwort, aber ich weiß, dass diese Lösung nicht auf IE funktioniert (alle von ihnen). IE ist nicht mit der Download-Attributreferenz vertraut – Link

    – Ayalon Grinfeld

    10. August 2017 um 13:35 Uhr


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

Sie könnten versuchen, Folgendes zu verwenden:

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)

  • saveAs() stammt von FileSaver.js – github.com/eligre/FileSaver.js

    – Gautham

    5. September 2017 um 8:29 Uhr

  • “Überhaupt keine Notwendigkeit, sich mit irgendwelchen HTML-Elementen zu befassen” … und den Quellcode von filesaver.js zu lesen … es tut genau das, lol

    – Krieg

    24. September 2017 um 15:55 Uhr

  • Ja. Ich wollte damit sagen, dass Sie sich nicht direkt mit den HTML-Elementen befassen müssen.

    – Gautham

    25. September 2017 um 16:43 Uhr

  • Dies ist die beste Antwort, da es keine Größenbeschränkung von 1 MB gibt und eine Bibliothek anstelle von benutzerdefinierten Hacks verwendet

    – Oseiskar

    1. November 2017 um 12:41 Uhr

  • FileSaver.js ist sehr schwer für einen einfachen Dateidownload. Überprüfen Sie meine Antwort unten; STRG+F und suchen Sie nach „ES6+“.

    – MSOACC

    28. Januar 2021 um 14:31 Uhr

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

  • Dies ist zwar eine großartige Antwort, initMouseEvent() ist ein veraltet Web Standard und sollte nicht mehr verwendet werden. Verwenden Sie stattdessen die new MouseEvent() Schnittstelle. Es ist jedoch nur ein kleiner Refactor.

    – Morkro

    28. Mai 2017 um 8:16 Uhr

  • @morkro ist richtig; Ich habe unten eine Antwort gepostet, die die Antwort von @ Maia aufbaut und verbessert initMouseEvent entfernt (und der Code allgemein aufgeräumt)

    – MSOACC

    28. Januar 2021 um 14:28 Uhr

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

  • Dies ist zwar eine großartige Antwort, initMouseEvent() ist ein veraltet Web Standard und sollte nicht mehr verwendet werden. Verwenden Sie stattdessen die new MouseEvent() Schnittstelle. Es ist jedoch nur ein kleiner Refactor.

    – Morkro

    28. Mai 2017 um 8:16 Uhr

  • @morkro ist richtig; Ich habe unten eine Antwort gepostet, die die Antwort von @ Maia aufbaut und verbessert initMouseEvent entfernt (und der Code allgemein aufgeräumt)

    – MSOACC

    28. Januar 2021 um 14:28 Uhr

Laden Sie das JSON Objekt als Datei aus dem Browser herunter
Fabian von Ellerts

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 = /*@[email protected]*/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

  • Dies funktionierte auf Chrome, scheint aber nicht auf Firefox zu funktionieren … bitte helfen Sie! codepen.io/anon/pen/ePYPJb

    – Urmil Parich

    28. September 2018 um 13:32 Uhr

  • Nette Funktion, ergänzen document.body.appendChild(a); a.style.display = 'none'; damit es in Firefox funktioniert.

    – Fabian von Ellerts

    16. Januar 2019 um 9:25 Uhr

843080cookie-checkLaden Sie das JSON-Objekt als Datei aus dem Browser herunter

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy