Balise d'ancrage télécharger attribut ne fonctionne pas :Bug dans Chrome 35.0.1916.114
Je suis en train de reportez-vous à ce code où nous sommes le téléchargement d'un fichier CSV sur le clic d'un lien.
$(document).ready(function () {
function exportTableToCSV($table, filename) {
var $rows = $table.find('tr:has(td)'),
//Temporary delimiter characters unlikely to be typed by keyboard
//This is to avoid accidentally splitting the actual contents
tmpColDelim = String.fromCharCode(11), //vertical tab character
tmpRowDelim = String.fromCharCode(0), //null character
//actual delimiter characters for CSV format
colDelim = '","',
rowDelim = '"\r\n"',
//Grab text from table into CSV formatted string
csv = '"' + $rows.map(function (i, row) {
var $row = $(row),
$cols = $row.find('td');
return $cols.map(function (j, col) {
var $col = $(col),
text = $col.text();
return text.replace('"', '""'); //escape double quotes
}).get().join(tmpColDelim);
}).get().join(tmpRowDelim)
.split(tmpRowDelim).join(rowDelim)
.split(tmpColDelim).join(colDelim) + '"',
//Data URI
csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csv);
$(this)
.attr({
'download': filename,
'href': csvData,
'target': '_blank'
});
}
//This must be a hyperlink
$(".export").on('click', function (event) {
//CSV
exportTableToCSV.apply(this, [$('#dvData>table'), 'export.csv']);
//IF CSV, don't do event.preventDefault() or return false
//We actually need this to be a typical hyperlink
});
});
Mais de toute façon, le fichier téléchargé est nommé comme download
sans extension dans Chrome v35.0.1916.114 , une solution est de modifier les données:application/csv de données:texte/csv, mais qui ne m'a aidé à obtenir l'extension correcte dans le fichier téléchargé, c'est à dire maintenant téléchargements download.csv
.
Le problème avec le téléchargement de l'attribut reste. Je voulais le nom de mon fichier en tant que export.csv
, mais il me donne toujours download.csv
.
- J'étais en train de Chrome 34. Téléchargé "l'exportation.csv", mis à jour à 35 téléchargé comme "télécharger". Semble comme un chrome bug pour moi.
- Oui... si il ya une solution pour cela?
- Juste remplir un rapport de bogue et d'attendre un correctif à être publié (je suis en cours d'exécution dans ce même numéro). Il sera probablement très bientôt. Si vous ne pouvez pas attendre, vous devrez envoyer le csv vers le serveur avec une requête ajax de sorte que vous pouvez sauvegarder.
- Donc, puis-je utiliser nodejs serveur proxy http et l'obtenir à partir de là? si oui quelqu'un peut-il me donner des pointeurs comment le faire?
- stackoverflow.com/questions/13912198/... semble fonctionner à voir jsFiddle: jsfiddle.net/pnMH2
- Je confirme ce qui se passe ici aussi, seul "télécharger", sans extension de téléchargements, doit être "à l'exportation.csv" toute solution rapide sur Google nouvelles à ce sujet ?
- Ce bogue a été corrigé dans google Chrome 36, publié le 16 juillet 2014. Votre JSFiddle fonctionne à nouveau!
Vous devez vous connecter pour publier un commentaire.
De sorte que vous devriez changement ce:
À Ce
Et cela devrait fonctionner!
'target': '_blank'
pour le faire fonctionner...Chrome 37var universalBOM = "\uFEFF"; //var uri = 'data:text/csv;charset=utf-8,' + encodeURIComponent(universalBOM + CSV); var blob = new Blob([universalBOM, CSV], {type: 'application/xls;charset=UTF-8', encoding:"UTF-8"}); //new way var csvUrl = URL.createObjectURL(blob);
C'est un bug dans Chrome 35 rapporté dans le numéro 377860.
Mise à jour: Ce bug a été fusionnée dans la question n ° 373182. Vous pouvez cliquez sur les étoiles à dire les devs vous pensez que cette question devrait se fixe et bénéficiez également notifié des changements.
Généralement le chrome de l'équipe publie une mise à jour toutes les 2 semaines, donc vous pouvez vous attendre un correctif bientôt puisque c'est marqué comme Pri-1 qui je suppose signifie la plus haute priorité.
Pour moi travaillé:
Ici est un peu ce qui a fonctionné pour moi (dans Chrome et Firefox). Je suis en train de construire un fichier xls d'une table.
Espère que ça aide quelqu'un d'autre...
--Charles
Quand j'ai essayé ce code, je n'ai pas été en mesure d'obtenir des résultats dans IE plus ce code ne parcourt
td
, il ignorera tous lesth
présents dans votre table. J'ai modifié le code pour résoudre les problèmes auxquels je faisais face:CodePen
ajouter balise d'ancrage à l'aide de la chaîne d'ajouter des informations de balise dans la chaîne, puis ajouter, ça fonctionne pour moi pour google chrome