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

Les noms de fichiers peuvent être suggérés par des en-têtes HTTP, mais il n'y a pas de mécanisme standard accomplissant la même chose avec les URI de données ou window.open .

Il existe des façons de spécifier un nom de fichier lors du téléchargement de données générées, mais AFAIK n'en existe pas dans plusieurs navigateurs.

L'une de ces façons est le nouvel attribut de download pour <a> éléments. 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 quel nom de fichier doit être utilisé pour le fichier téléchargé.

Au lieu d'utiliser window.open() vous pouvez générer un lien invisible avec l'attribut de download et .click() it.

 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'ajout ne va pas aggraver les choses pour d'autres navigateurs: ils continueront à 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, cela ne vous rendra pas bon dans les navigateurs non pris en charge. )

Cela ne fonctionne pas dans Chrome dernier, j'ai modifié cela 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 d'identification download_1, il créera un lien de téléchargement invisible et cliquez sur ça. 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 🙂

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

Pour la solution de navigateurs moderne, ça se passe comme ceci, testé: 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 à propos de cela ici