webentwicklung-frage-antwort-db.com.de

So legen Sie einen Dateinamen mit window.open fest

Ich versuche, ein temporäres Ergebnis herunterzuladen, das mit JavaScript berechnet wurde. Angenommen, ich habe eine Zeichenfolge str, ich möchte eine Datei herunterladen, die str enthält, und benenne sie als data.csv. Ich verwende den folgenden Code:

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

Die Datei kann erfolgreich heruntergeladen werden, aber wie kann ich die Datei data.csv Automatisch benennen, anstatt den Namen jedes Mal manuell festzulegen?

42
huangcd

Dies erreichen Sie mit dem download-Attribut für <a> - Elemente. Beispielsweise:

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

Dieses Attribut gibt an, dass die Datei heruntergeladen werden soll (statt gegebenenfalls angezeigt zu werden), und gibt an, welcher Dateiname für die heruntergeladene Datei verwendet werden soll.

Anstatt window.open() zu verwenden, könnten Sie einen unsichtbaren Link mit dem download -Attribut und .click() erzeugen.

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

Leider wird dies nicht in allen Browsern unterstützt, aber das Hinzufügen wird die Situation für andere Browser nicht verschlechtern: Sie werden weiterhin die Dateien mit unbrauchbaren Dateinamen herunterladen. (Dies setzt voraus, dass Sie einen MIME-Typ verwenden und der Browser versucht, ihn herunterzuladen. Wenn Sie versuchen, dem Benutzer das Herunterladen einer .html - Datei zu ermöglichen, anstatt sie anzuzeigen, wird dies nicht durchgeführt tun Sie etwas Gutes in nicht unterstützten Browsern.)

76
Jeremy Banks

Das funktioniert in der neuesten Version von Chrome nicht. Ich habe das geändert und der folgende Code funktioniert einwandfrei.

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

Wenn Sie also auf die Schaltfläche download_1 id klicken, wird ein unsichtbarer Download-Link erstellt und darauf geklickt. Ich habe eine andere Funktion verwendet, um js vorzubereiten.

Die JSON2CSV-Funktion lautet wie folgt:

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

Hoffe, es wird anderen helfen :)

21
Jewel

Eine kürzere Version der akzeptierten (für meinen Fall musste Unicode verwendet werden)

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

Eine Lösung für IE ist, msSaveBlob zu verwenden und den Dateinamen zu übergeben.

Für moderne Browser geht die Lösung so, getestet: IE11, FF & 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);    
        }

Es gibt eine gute Diskussion darüber hier

6
lucas.coelho