web-dev-qa-db-fra.com

Comment définir un nom de fichier à l'aide de window.open

J'essaie de télécharger un résultat temporaire calculé par JavaScript. Disons que j'ai une chaîne str, je veux télécharger un fichier contenant str et je l'ai nommé data.csv, J'utilise le code suivant:

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

Le fichier peut être téléchargé avec succès, mais comment puis-je nommer le fichier data.csv automatiquement plutôt que de définir le nom à la main à chaque fois?

javascriptdownloadwindow.open
42
huangcd

Vous pouvez y parvenir en utilisant l'attribut download pour les éléments <a>. Par exemple:

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

Cet attribut indique que le fichier doit être téléchargé (au lieu d'être affiché, le cas échéant) et spécifie le nom de fichier à utiliser pour le fichier téléchargé.

Au lieu d'utiliser window.open(), vous pouvez générer un lien invisible avec l'attribut download et .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);

Malheureusement, cela n'est pas pris en charge dans tous les navigateurs, mais l'ajouter n'empirera pas les autres navigateurs: ils continueront de télécharger les fichiers avec des noms de fichiers inutiles. (Cela suppose que vous utilisez un type MIME, c'est que leur navigateur tente de télécharger. Si vous essayez de laisser l'utilisateur télécharger un fichier .html Au lieu de l'afficher, ce ne sera pas faites-vous du bien dans les navigateurs non pris en charge.)

76
Jeremy Banks

Cela ne fonctionne pas dans le dernier Chrome, je l'ai modifié et le code suivant fonctionnera 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);
});

Donc, lorsque vous cliquez sur le bouton id de download_1, cela créera un lien de téléchargement invisible et cliquez dessus. J'ai utilisé une autre fonction pour préparer js.

La fonction JSON2CSV est la suivante:

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

J'espère que cela aidera les autres :)

21
Jewel

Une version plus courte de celle acceptée (pour mon cas, j'ai dû utiliser unicode)

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

Une solution pour IE consiste à utiliser msSaveBlob et à passer le nom du fichier.

Pour les navigateurs modernes, la solution va comme ceci, testée: IE11, FF et 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);    
        }

Il y a une bonne discution à ce sujet ici

6
lucas.coelho