txt - Nombre de archivo blob de JavaScript sin enlace

listar archivos de una carpeta javascript

Question

¿Cómo se establece el nombre de un archivo blob en JavaScript cuando se fuerza la descarga a través de window.location?

function newFile(data) {
    var json = JSON.stringify(data);
    var blob = new Blob([json], {type: "octet/stream"});
    var url  = window.URL.createObjectURL(blob);
    window.location.assign(url);
}

Al ejecutar el código anterior, se descarga un archivo al instante sin una actualización de página que se ve como bfefe410-8d9c-4883-86c5-d76c50a24a1d. Quiero establecer el nombre de archivo como my-download.json en su lugar.

Answer 1

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

1. Crea una etiqueta oculta <a> .
2. Establezca su atributo href en la URL del blob.
3. Establezca su atributo de download en el nombre del archivo.
4. Haga clic en la etiqueta <a> .

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, uso FileSaver.js en su lugar.

Notas

• Los navegadores antiguos no son compatibles con el atributo "descargar", ya que es parte de HTML5.
• Algunos formatos de archivos son considerados inseguros por el navegador y la descarga falla. Guardar archivos JSON con extensión txt me funciona.

Answer 2

Mismo principio que las soluciones anteriores. Pero tuve problemas con Firefox 52.0 (32 bit) donde los archivos grandes (> 40 MBytes) se truncan en posiciones aleatorias. La reprogramación de la llamada de revokeObjectUrl () corrige 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)
  }
}

Answer 3

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

$(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 . Godspeed .

Answer 4

$http.get(FILE_URL { responseType: ''arraybuffer'' }).then(function(response) { var file = new Blob([response.data], {type: fType}); a.href = window.URL.createObjectURL(file); a.download = fname; a.click(); });

Answer 5

saveFileOnUserDevice = function(file){ // content: blob, name: string
        if(navigator.msSaveBlob){ // For ie and Edge
            return navigator.msSaveBlob(file.content, file.name);
        }
        else{
            let link = document.createElement(''a'');
            link.href = window.URL.createObjectURL(file.content);
            link.download = file.name;
            document.body.appendChild(link);
            link.dispatchEvent(new MouseEvent(''click'', {bubbles: true, cancelable: true, view: window}));
            link.remove();
            window.URL.revokeObjectURL(link.href);
        }
    }