Télécharger l'objet JSON en tant que fichier à partir du navigateur

J'ai le code suivant pour permettre aux utilisateurs de télécharger des chaînes de données dans un fichier csv.

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

Cela fonctionne très bien que si le client exécute le code, il génère une page vierge et commence à télécharger les données dans le fichier csv.

J'ai donc essayé de le faire avec un objet JSON comme

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

Mais je ne vois qu'une page avec les données JSON affichées dessus, sans la télécharger.

J'ai fait quelques recherches et celui-ci prétend fonctionner mais je ne vois aucune différence dans mon code.

Est-ce que je manque quelque chose dans mon code?

Merci d'avoir lu ma question :)

Voici comment je l'ai résolu pour mon application:

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

JS (pur JS, pas jQuery ici):

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

Dans ce cas, storageObjest l'objet js que vous souhaitez stocker, et "scene.json" est juste un exemple de nom pour le fichier résultant.

Cette approche présente les avantages suivants par rapport aux autres propositions:

• Aucun élément HTML ne doit être cliqué
• Le résultat sera nommé comme vous le souhaitez
• pas besoin de jQuery

J'avais besoin de ce comportement sans clic explicite car je veux déclencher le téléchargement automatiquement à un moment donné à partir de js.

Solution JS (aucun HTML requis):

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

J'ai trouvé une réponse.

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

semble bien fonctionner pour moi.

** Tout le mérite revient à @ cowboy-ben-alman, qui est l'auteur du code ci-dessus **

Ce serait une version pure de JS (adaptée de cowboy's):

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

Vous pouvez essayer d'utiliser:

• le constructeur Blob de l'API JavaScript native et
• la méthode FileSaver.js saveAs()

Pas besoin de traiter du tout les éléments HTML.

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

Si vous voulez bien imprimer le JSON, par cette réponse , vous pouvez utiliser:

JSON.stringify(data,undefined,2)

Ce qui suit a fonctionné pour moi:

/* 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)
}

et puis l'appeler comme ça

saveJSON(myJsonObject, "saved_data.json");

J'ai récemment dû créer un bouton qui téléchargerait un fichier json de toutes les valeurs d'une grande forme. J'en avais besoin pour travailler avec IE / Edge / Chrome. C'est ce que j'ai fait:

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

Il y avait un problème avec le nom de fichier et l'extension dans Edge, mais au moment de l'écriture, cela semblait être un bogue avec Edge qui devait être corrigé.

J'espère que cela aide quelqu'un

Solution simple et propre pour ceux qui ne ciblent que les navigateurs modernes:

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

La downloadpropriété des liens est nouvelle et n'est pas prise en charge dans Internet Explorer (voir le tableau de compatibilité ici ). Pour une solution multi-navigateurs à ce problème, je jetterais un œil à FileSaver.js

Réagissez : ajoutez ceci où vous voulez dans votre méthode de rendu.

• Objet en état :

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

• Objet dans les accessoires :

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

className et style sont facultatifs, modifiez le style selon vos besoins.

Essayez de définir un autre type MIME: exportData = 'data:application/octet-stream;charset=utf-8,';

Mais il peut y avoir des problèmes avec le nom de fichier dans la boîte de dialogue d'enregistrement.

Si vous préférez l'extrait de console, raser, au nom de fichier, vous pouvez le faire:

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