59 votes

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

J'essaie de télécharger le résultat temporaire calculé par JavaScript. Supposons que j'ai une chaîne str , je souhaite télécharger un fichier contenant str et le nommer 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 ?

27voto

Jewel Points 153

Cela ne fonctionne pas dans le dernier Chrome, j'ai modifié cela et le code suivant fonctionnera bien,

  $("#download_1").on('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);
});

Ainsi, lorsque vous cliquez sur le bouton download_1 id, un lien de téléchargement invisible est créé 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 = '';

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

        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 ça aidera d'autres :)

17voto

Sameera Rukshan Points 559

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

9voto

lucas.coelho Points 387

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

Pour les navigateurs modernes, la solution est la suivante, 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 discussion à ce sujet ici

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X