web-dev-qa-db-de.com

Attribut zum Herunterladen des Anker-Tags funktioniert nicht: Fehler in Chrome 35.0.1916.114

Ich versuche, auf diesen Code zu verweisen wo wir beim Anklicken eines Links eine CSV-Datei herunterladen. 

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

Aber irgendwie wird die heruntergeladene Datei in Chrome v35.0.1916.114 als download ohne Erweiterung bezeichnet. Eine Problemumgehung bestand darin, die Daten zu ändern: application/csv in data: text/csv. Dies hat jedoch nur dazu beigetragen, dass die Erweiterung in der heruntergeladenen Datei korrekt war dh es wird jetzt als download.csv heruntergeladen. 

Das Problem mit dem Download-Attribut bleibt weiterhin bestehen. Ich wollte meine Datei mit export.csv benennen, aber sie gibt mir trotzdem download.csv.

30
Sudo

Also solltest du das ändern:

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

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

Zu diesem

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

Und es sollte funktionieren!

29
Mathew Silva

Dies ist ein Fehler in Chrome 35, der in Ausgabe # 377860 gemeldet wurde.

Update: Dieser Fehler wurde in issue # 373182 zusammengeführt. Sie können auf den Stern klicken, um den Entwicklern mitzuteilen, dass dieses Problem behoben werden sollte, und über Änderungen informiert zu werden.

Normalerweise veröffentlicht das Chromium-Team alle zwei Wochen ein Update, sodass Sie in Kürze eine Korrektur erwarten können, da diese als Pri-1 markiert ist.

9
styfle

Für mich gearbeitet:

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

Hier ist ein bisschen, das für mich funktionierte (in Chrome und Firefox). Ich baue eine Xls-Datei aus einer Tabelle.

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

Hoffe das hilft jemand anderem ...

- Charles

1
W3BGUY

Als ich diesen Code ausprobierte, konnte ich keine Ergebnisse in IE abrufen, da dieser Code nur td durchläuft, er wird alle th in Ihrer Tabelle überspringen. Ich habe den Code geändert, um beide Probleme zu lösen:

$(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