Descargue el objeto JSON como un archivo desde el navegador

Tengo el siguiente código para permitir a los usuarios descargar cadenas de datos en el archivo csv.

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

Funciona bien que si el cliente ejecuta el código, genera una página en blanco y comienza a descargar los datos en un archivo csv.

Así que intenté hacer esto con un objeto JSON como

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

Pero solo veo una página con los datos JSON mostrados, no la descargo.

Investigué un poco y este dice que funciona, pero no veo ninguna diferencia en mi código.

¿Me falta algo en mi código?

Gracias por leer mi pregunta:)

Así es como lo resolví para mi aplicación:

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

JS (JS puro, no jQuery aquí):

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

En este caso, storageObjes el objeto js que desea almacenar, y "scene.json" es solo un nombre de ejemplo para el archivo resultante.

Este enfoque tiene las siguientes ventajas sobre otras propuestas:

• No se debe hacer clic en ningún elemento HTML
• El resultado se nombrará como lo desee
• no se necesita jQuery

Necesitaba este comportamiento sin hacer clic explícitamente, ya que quiero activar la descarga automáticamente en algún momento desde js.

Solución JS (no se requiere HTML):

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

Encontré una respuesta.

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

Parece funcionar bien para mi.

** Todo el crédito va a @ cowboy-ben-alman, quien es el autor del código anterior **

Esta sería una versión pura de JS (adaptada de cowboy):

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

Puedes intentar usar:

• el constructor Blob de la API JavaScript nativa y
• el método FileSaver.js saveAs()

No es necesario tratar con ningún elemento 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 desea imprimir bastante el JSON, según esta respuesta , puede usar:

JSON.stringify(data,undefined,2)

Lo siguiente funcionó para mí:

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

y luego llamarlo así

saveJSON(myJsonObject, "saved_data.json");

Recientemente tuve que crear un botón que descargaría un archivo json de todos los valores de una forma grande. Necesitaba esto para trabajar con IE / Edge / Chrome. Esto es lo que hice:

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

Hubo un problema con el nombre de archivo y la extensión en Edge, pero al momento de escribir esto parecía ser un error con Edge que se debe solucionar.

Espero que esto ayude a alguien

Solución simple y limpia para aquellos que solo se dirigen a los navegadores modernos:

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 downloadpropiedad de los enlaces es nueva y no es compatible con Internet Explorer (consulte la tabla de compatibilidad aquí ). Para una solución de navegador cruzado a este problema, echaría un vistazo a FileSaver.js

Reaccionar : agrega esto donde quieras en tu método de renderizado.

• Objeto en estado :

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

• Objeto en accesorios :

<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 y style son opcionales, modifique el estilo según sus necesidades.

Intente configurar otro tipo MIME: exportData = 'data:application/octet-stream;charset=utf-8,';

Pero puede haber problemas con el nombre del archivo en el cuadro de diálogo Guardar.

Si prefiere el fragmento de consola, el raser, que el nombre de archivo, puede hacer esto:

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