web-dev-qa-db-fra.com

L'attribut de téléchargement de balise d'ancrage ne fonctionne pas: Bug dans Chrome 35.0.1916.114

J'essaie de reportez-vous à ce code où nous téléchargeons un fichier CSV en cliquant sur 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
    });
});

Cependant, le fichier téléchargé porte le nom download sans extension dans Chrome v35.0.1916.114. Une solution de contournement consistait à modifier les données: application/csv en données: text/csv, mais cela n’a aidé à obtenir l’extension correcte dans le fichier téléchargé c'est-à-dire qu'il télécharge maintenant en tant que download.csv. 

Le problème avec l'attribut de téléchargement reste toujours. Je voulais nommer mon fichier comme étant export.csv, mais il me donne toujours download.csv.

javascriptjqueryhtmlhtml5google-chrome
30
Sudo

Donc, vous devriez changer ceci:

// Data URI
csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csv);

$(this)
    .attr({
    'download': filename,
        'href': csvData,
        'target': '_blank'
});

Pour ça

// Data URI
//csvData = 'data:text/csv;charset=utf-8,' + encodeURIComponent(csv), //old way
blob = new Blob([csv], { type: 'text/csv' }); //new way
var csvUrl = URL.createObjectURL(blob);

$(this)
.attr({
    'download': filename,
    'href': csvUrl
});

Et ça devrait marcher!

29
Mathew Silva

Ceci est un bogue de Chrome 35 signalé dans le numéro 377860.

Mise à jour: Ce bogue a été fusionné dans numéro n ° 373182 . Vous pouvez cliquer sur l'étoile pour indiquer aux développeurs que vous pensez que ce problème devrait être résolu et également averti des modifications.

En règle générale, l'équipe Chrome publie une mise à jour toutes les deux semaines. Vous pouvez donc vous attendre à une correction car elle porte la mention Pri-1, ce qui, je suppose, signifie la priorité la plus élevée.

9
styfle

Pour moi a travaillé:

var content = "some content";
var link = document.createElement('a');
var blob = new Blob(["\ufeff", content]);
var url = URL.createObjectURL(blob);
link.href = url;
link.setAttribute('download', 'file.csv');
link.click();
2
vokabakov

Voici un peu qui a fonctionné pour moi (dans Chrome et Firefox). Je construis un fichier xls à partir d'une table.

  function downloadInnerHtml(filename,elId,mimeType){
    var elHtml='<table border="1">'+document.getElementById(elId).innerHTML+'</table>';
    var link=document.createElement('a');
    mimeType=mimeType || 'application/xls';

    var blob=new Blob([elHtml],{type:mimeType});
    var url=URL.createObjectURL(blob);
    link.href=url;

    link.setAttribute('download', filename);
    link.innerHTML = "Export to CSV";
    document.body.appendChild(link);
    link.click();
  }

  $(document).on("click","#exportButton",function(){
    var date=new Date();
    var mm=date.getMonth()+1;
    var dd=date.getDate();
    var yy=date.getFullYear();
    var timeStamp=yy+""+((mm<10)?"0"+mm:mm)+""+((dd<10)?"0"+dd:dd);
    var fileName=timeStamp+'_Employees.xls';
    downloadInnerHtml(fileName,'mainEmployeeTable','application/xls');
  });

J'espère que ça aide quelqu'un d'autre ...

--Charles

1
W3BGUY

Lorsque j'ai essayé ce code, je n'ai pas pu obtenir de résultats dans IE. Ce code itère uniquement sur td, il ignorera tout th présent dans votre tableau. J'ai modifié le code pour résoudre les problèmes auxquels je faisais face:

$(document).ready(function () {
    function exportTableToCSV($table, filename) {

            var $rows = $table.find('tr'),
            tmpColDelim = String.fromCharCode(11),
            tmpHeadDelim = String.fromCharCode(11),
            tmpRowDelim = String.fromCharCode(0),
            colDelim = '","',
            headDelim = '","',
            rowDelim = '"\r\n"',

            csv = '"' + $rows.map(function (i, row) {
                var $row = $(row),
                $cols = $row.find('td');
                $heads = $row.find('th');

                var c = $heads.map(function (k, head) {
                    var $head = $(head),
                    text = $head.text();
                    return text.replace(/"/g, '""');
                }).get().join(tmpHeadDelim);

                var d = $cols.map(function (j, col) {
                    var $col = $(col),
                    text = $col.text();
                    return text.replace(/"/g, '""');
                }).get().join(tmpColDelim);

            return (c+d);

        }).get().join(tmpRowDelim)
            .split(tmpRowDelim).join(rowDelim)
            .split(tmpHeadDelim).join(headDelim)
            .split(tmpColDelim).join(colDelim) + '"';


        var ua = window.navigator.userAgent;
        var msie = ua.indexOf("MSIE ");

        // if Internet Explorer (10+)
        if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) {
            var blob = new Blob([decodeURIComponent(csv)], {
                    type: 'text/csv;charset=utf8'
            });
            window.navigator.msSaveBlob(blob, filename);
        }
        else {
            var link = document.createElement('a');
            var blob = new Blob([csv],{type:'text/csv;charset=utf8'});
            var url = URL.createObjectURL(blob);
            link.href = url;
            link.setAttribute('download', filename);
            document.body.appendChild(link);
            link.click();
        }
    }

    $("#fnExcelReport").on('click', function (event) {
        var args = [$('#tableContent'), 'Report.csv'];
        exportTableToCSV.apply(this, args);
    });
});

CodePen

0
Aakash Goplani