javascript - cómo configurar un nombre de archivo usando window.open

download

Question

Estoy tratando de descargar el resultado temporal calculado por javascript. Digamos que tengo una cadena de caracteres, quiero descargar un archivo que contiene str y lo nombré como data.csv , estoy usando el siguiente código:

window.open(''data:text/csv;charset=utf-8,'' + str);

OK, el archivo se puede descargar con éxito, pero ¿cómo puedo nombrar el archivo data.csv automáticamente en lugar de establecer el nombre cada vez con la mano?

¡Gracias!

Answer 1

Eso no funciona en Chrome más reciente, lo he modificado y el siguiente código funcionará bien,

    $("#download_1").click(function() {
    var json_pre = ''[{"Id":1,"UserName":"Sam Smith"},{"Id":2,"UserName":"Fred Frankly"},{"Id":1,"UserName":"Zachary Zupers"}]'';
    var json = $.parseJSON(json_pre);

    var csv = JSON2CSV(json);
    var downloadLink = document.createElement("a");
    var blob = new Blob(["/ufeff", csv]);
    var url = URL.createObjectURL(blob);
    downloadLink.href = url;
    downloadLink.download = "data.csv";

    document.body.appendChild(downloadLink);
    downloadLink.click();
    document.body.removeChild(downloadLink);
});

Entonces, al hacer clic en el botón de ID de descarga, se creará un enlace de descarga invisible y se hará clic en él. He utilizado otra función para preparar js.

La función JSON2CSV es la siguiente:

function JSON2CSV(objArray) {
    var array = typeof objArray != ''object'' ? JSON.parse(objArray) : objArray;
    var str = '''';
    var line = '''';

    if ($("#labels").is('':checked'')) {
        var head = array[0];
        if ($("#quote").is('':checked'')) {
            for (var index in array[0]) {
                var value = index + "";
                line += ''"'' + value.replace(/"/g, ''""'') + ''",'';
            }
        } else {
            for (var index in array[0]) {
                line += index + '','';
            }
        }

        line = line.slice(0, -1);
        str += line + ''/r/n'';
    }

    for (var i = 0; i < array.length; i++) {
        var line = '''';

        if ($("#quote").is('':checked'')) {
            for (var index in array[i]) {
                var value = array[i][index] + "";
                line += ''"'' + value.replace(/"/g, ''""'') + ''",'';
            }
        } else {
            for (var index in array[i]) {
                line += array[i][index] + '','';
            }
        }

        line = line.slice(0, -1);
        str += line + ''/r/n'';
    }
    return str;
}

Espero que ayude a otros :)

Answer 2

Puedes lograr esto usando el atributo de download para los elementos <a> . Por ejemplo:

<a href="1251354216241621.txt" download="your-foo.txt">Download Your Foo</a>

Este atributo indica que el archivo debe descargarse (en lugar de mostrarse, si corresponde) y especifica qué nombre de archivo debe usarse para el archivo descargado.

En lugar de usar window.open() , puede generar un enlace invisible con el atributo de download y .click() .

var str = "Name, Price/nApple, 2/nOrange, 3";
var uri = ''data:text/csv;charset=utf-8,'' + str;

var downloadLink = document.createElement("a");
downloadLink.href = uri;
downloadLink.download = "data.csv";

document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);

Desafortunadamente, esto no se admite en todos los navegadores, pero agregarlo no empeorará las cosas para otros navegadores: continuarán descargando los archivos con nombres de archivos inútiles. (Esto supone que estás usando un tipo MIME porque su navegador intenta descargar. Si intentas que el usuario descargue un archivo .html lugar de mostrarlo, esto no te servirá de nada en los navegadores no compatibles. )

Answer 3

Una solución para IE es usar msSaveBlob y pasar el nombre del archivo.

Para los navegadores modernos, la solución es la siguiente: probado, IE11, FF y Chrome

 var csvData = new Blob([arg.data], {type: ''text/csv;charset=utf-8;''});
        //IE11 & Edge
        if (navigator.msSaveBlob) {
            navigator.msSaveBlob(csvData, exportFilename);
        } else {
            //In FF link must be added to DOM to be clicked
            var link = document.createElement(''a'');
            link.href = window.URL.createObjectURL(csvData);
            link.setAttribute(''download'', exportFilename);
            document.body.appendChild(link);    
            link.click();
            document.body.removeChild(link);    
        }

Hay una buena discusión sobre eso here

Answer 4

Una versión más corta de una aceptada (para mi caso tenía que usar unicode)

var link = document.createElement("a");
link.href = ''data:text/csv,'' + encodeURIComponent("algún texto");
link.download = "Example.csv";
link.click();