Nombre de archivo de blob de JavaScript sin enlace

Solución:

La única forma que conozco es el truco utilizado por FileSaver.js:

1. Crea un oculto <a> etiqueta.
2. Establecer su href atributo a la URL del blob.
3. Establecer su download atributo al nombre del archivo.
4. Clickea en el <a> etiqueta.

Aquí hay un ejemplo simplificado (jsfiddle):

var saveData = (function () {
    var a = document.createElement("a");
    document.body.appendChild(a);
    a.style = "display: none";
    return function (data, fileName) {
        var json = JSON.stringify(data),
            blob = new Blob([json], {type: "octet/stream"}),
            url = window.URL.createObjectURL(blob);
        a.href = url;
        a.download = fileName;
        a.click();
        window.URL.revokeObjectURL(url);
    };
}());

var data = { x: 42, s: "hello, world", d: new Date() },
    fileName = "my-download.json";

saveData(data, fileName);

Escribí este ejemplo solo para ilustrar la idea, en el código de producción use FileSaver.js en su lugar.

Notas

• Los navegadores más antiguos no admiten el atributo “descargar”, ya que forma parte de HTML5.
• El navegador considera que algunos formatos de archivo no son seguros y la descarga falla. Guardar archivos JSON con la extensión txt funciona para mí.

Solo quería ampliar la respuesta aceptada con soporte para Internet Explorer (la mayoría de las versiones modernas, de todos modos) y ordenar el código usando jQuery:

$(document).ready(function() {
    saveFile("Example.txt", "data:attachment/text", "Hello, world.");
});

function saveFile (name, type, data) {
    if (data !== null && navigator.msSaveBlob)
        return navigator.msSaveBlob(new Blob([data], { type: type }), name);
    var a = $("<a style="display: none;"/>");
    var url = window.URL.createObjectURL(new Blob([data], {type: type}));
    a.attr("href", url);
    a.attr("download", name);
    $("body").append(a);
    a[0].click();
    window.URL.revokeObjectURL(url);
    a.remove();
}

Aquí hay un ejemplo de Fiddle. Buena suerte.

Mismo principio que las soluciones anteriores. Pero tuve problemas con Firefox 52.0 (32 bits) donde los archivos grandes (> 40 MBytes) se truncan en posiciones aleatorias. La reprogramación de la llamada de revokeObjectUrl () soluciona este problema.

function saveFile(blob, filename) {
  if (window.navigator.msSaveOrOpenBlob) {
    window.navigator.msSaveOrOpenBlob(blob, filename);
  } else {
    const a = document.createElement('a');
    document.body.appendChild(a);
    const url = window.URL.createObjectURL(blob);
    a.href = url;
    a.download = filename;
    a.click();
    setTimeout(() => {
      window.URL.revokeObjectURL(url);
      document.body.removeChild(a);
    }, 0)
  }
}

ejemplo de jsfiddle

---

---

Utiliza Nuestro Buscador