Das Exportieren von HTML-Tabellendaten nach Excel mit JavaScript / JQuery funktioniert im Chrome-Browser nicht ordnungsgemäß

90

Ich habe eine HTML-Tabelle in der Geschwindigkeitsvorlage. Ich möchte die HTML-Tabellendaten exportieren, um sie entweder mit Java-Skript oder mit jquery, comatibale mit allen Browsern zu übertreffen. Ich benutze das folgende Skript

<script type="text/javascript">
function ExportToExcel(mytblId){
       var htmltable= document.getElementById('my-table-id');
       var html = htmltable.outerHTML;
       window.open('data:application/vnd.ms-excel,' + encodeURIComponent(html));
    }
</script>

Dieses Skript funktioniert in Mozilla Firefox einwandfrei. Es wird mit einem Excel-Dialogfeld angezeigt, in dem Sie nach Optionen zum Öffnen oder Speichern gefragt werden. Aber als ich dasselbe Skript im Chrome-Browser getestet habe, funktioniert es nicht wie erwartet. Wenn Sie auf die Schaltfläche klicken, wird kein Popup für Excel angezeigt. Daten werden in einer Datei mit "Dateityp: Datei" heruntergeladen, keine Erweiterung wie .xls. Es gibt keine Fehler in der Chrome-Konsole.

Jsfiddle Beispiel:

http://jsfiddle.net/insin/cmewv/

Dies funktioniert gut in Mozilla, aber nicht in Chrom.

Chrome Browser Testfall:

Erstes Bild: Ich klicke auf die Schaltfläche In Excel exportieren

Erstes Bild: Ich klicke auf die Schaltfläche In Excel exportieren

und Ergebnis:

Ergebnis

javascript  jquery  html  excel  google-chrome 
— Sukane
quelle
Testfall ist für Chrom
— Sukane
1
Der obige Testfall schlägt fehl, wenn Sie das Open Source-Produkt LibreOffice und den Chrome-Browser verwenden. Wenn Sie jedoch MS Office installiert haben, funktioniert der Code ordnungsgemäß.
— Sukane

Antworten:

163

Das Excel-Exportskript funktioniert unter IE7 +, Firefox und Chrome.

function fnExcelReport()
{
    var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
    var textRange; var j=0;
    tab = document.getElementById('headerTable'); // id of table

    for(j = 0 ; j < tab.rows.length ; j++) 
    {     
        tab_text=tab_text+tab.rows[j].innerHTML+"</tr>";
        //tab_text=tab_text+"</tr>";
    }

    tab_text=tab_text+"</table>";
    tab_text= tab_text.replace(/<A[^>]*>|<\/A>/g, "");//remove if u want links in your table
    tab_text= tab_text.replace(/<img[^>]*>/gi,""); // remove if u want images in your table
    tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params

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

    if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))      // If Internet Explorer
    {
        txtArea1.document.open("txt/html","replace");
        txtArea1.document.write(tab_text);
        txtArea1.document.close();
        txtArea1.focus(); 
        sa=txtArea1.document.execCommand("SaveAs",true,"Say Thanks to Sumit.xls");
    }  
    else                 //other browser not tested on IE 11
        sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  

    return (sa);
}

Erstellen Sie einfach einen leeren Iframe:

<iframe id="txtArea1" style="display:none"></iframe>

Rufen Sie diese Funktion auf:

<button id="btnExport" onclick="fnExcelReport();"> EXPORT </button>
— Sampope
quelle
1
wenn nicht dann für was ist diese Linie? var txt = document.getElementById ('txtArea1'). contentWindow;
— Sampopes
3
Wenn Sie in Chrome auf die Schaltfläche zum Herunterladen klicken, geschieht bei Verwendung dieser Methode überhaupt nichts. Keine Konsolenfehler oder ähnliches.
— Kyle Bachan
1
Perfekt +1 !!! Es funktioniert in IE 11, Chrome 35, Firefox 29, Opera 17, aber nicht in Safari 5.1.7 !!! :(
— Suganth G
8
Wie kann ich den zufälligen Namen ändern? Ich wollte einen bestimmten Namen setzen.
— Osman Rahimi
20
"Das Dateiformat und die Erweiterung von download.xls stimmen nicht überein" Dies macht den Manager nicht glücklich: / Irgendwelche Ideen?
— Tom Stickel
34

Das datierbare Plugin löst den Zweck am besten und ermöglicht es uns, die HTML-Tabellendaten in Excel, PDF, TEXT zu exportieren. einfach zu konfigurieren.

Das vollständige Beispiel finden Sie unter dem folgenden datierbaren Referenzlink:

https://datatables.net/extensions/buttons/examples/html5/simple.html

(Screenshot von der datierbaren Referenzseite) Geben Sie hier die Bildbeschreibung ein

— Aditya
quelle
4
OH MEIN GOTT! Dies ist ein fantastisches Plugin! ... und es sind mehrere Plugins eingebettet !! Exportieren, Sortieren, Neu anordnen, Druckvorschau usw. Alle meine Daten, die den Bedarf anzeigen, wurden in nur einer Aufnahme gelöst!
— Gusstavv Gil
Kann ich mit diesem Plugin Stile auf mein Excel anwenden?
— Shruthi Sathyanarayana
@Addy das ist allerdings nur eine DataTables-Lösung, oder?
— Karl
1
Die Exportschaltfläche entfernt jede Dropdown-Liste für die Anzahl der Seitenzeilen, wenn Sie beide Dinge beibehalten möchten. Bitte überprüfen Sie datatables.net/extensions/buttons/examples/initialisation/… , um das Problem zu beheben.
— Kaushik Das
Das Plugin ist großartig. Gibt es eine Möglichkeit, einfach den relevanten Code zu extrahieren, um die Daten zu exportieren und hier hervorzuheben? Das wäre eine große Hilfe. Vielen Dank im Voraus
— Murtuza Husain
30

Das könnte helfen

function exportToExcel(){
var htmls = "";
            var uri = 'data:application/vnd.ms-excel;base64,';
            var template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>'; 
            var base64 = function(s) {
                return window.btoa(unescape(encodeURIComponent(s)))
            };

            var format = function(s, c) {
                return s.replace(/{(\w+)}/g, function(m, p) {
                    return c[p];
                })
            };

            htmls = "YOUR HTML AS TABLE"

            var ctx = {
                worksheet : 'Worksheet',
                table : htmls
            }


            var link = document.createElement("a");
            link.download = "export.xls";
            link.href = uri + base64(format(template, ctx));
            link.click();
}
— todotresde
quelle
1
Was ist, wenn ich nur Spalten exportieren möchte, die in der HTML-Tabelle sichtbar sind?
— Nouman Bhatti
Hallo, ich kann keine EXCEL-Operationen mit dem Blatt ausführen, z. B.: Autosum. Liegt das am Datenformat dieses EXCEL-Blattes oder an anderen Problemen? Ich brauche Hilfe, um einige Operationen durchzuführen.
— Nanda Kishore Allu
9

http://wsnippets.com/export-html-table-data-excel-sheet-using-jquery/ Versuchen Sie diesen Link, um Ihr Problem zu lösen

Geben Sie hier die Bildbeschreibung ein

— Uchit Shrestha
quelle
Uchit, danke für Ihre Antwort. Aber ich habe dieses Beispiel bereits ausprobiert. Wie ich bereits erwähnt habe, frage ich es, ob es in Mozilla gut funktioniert, aber nicht in Chorme. Kann ich dieses Beispiel bitte im Chrome-Browser ausprobieren?
— Sukane
5
Ich habe Ihren Code auf jsfiddle ausprobiert und erhalte ein positives Ergebnis. Es funktioniert auch in Chorme gut. Sie können im obigen Bild sehen, dass der Download erfolgreich war
— Uchit Shrestha
1
Uchit, danke. Ja, der Code funktioniert. Das Problem ist, dass ich Libre Office verwendet habe, sodass der Chrome-Export nach Excel nicht einwandfrei funktionierte (siehe Screenshot in Frage). Aber in MS Office funktioniert es, wie Sie erwähnt haben. Vielen Dank, dass Sie dafür einen jQuery-Code bereitgestellt haben.
— Sukane
Diese Funktion exportiert nicht die Werte von Feldern mit Dropdowns und Zeitstempeln
— SNT93
Es funktioniert nicht mit HTML mit mehreren Tabellen, sondern nur mit einer Tabelle. Wie kann ich das mit mehreren Tabellen machen ??????
— Ignacio Chiazzo
8

Anstatt zu verwenden window.open, können Sie einen Link mit dem onclickEreignis verwenden.
Und Sie können die HTML-Tabelle in die URL einfügen und den Dateinamen festlegen, der heruntergeladen werden soll.

Live-Demo:

function exportF(elem) {
  var table = document.getElementById("table");
  var html = table.outerHTML;
  var url = 'data:application/vnd.ms-excel,' + escape(html); // Set your html table into url 
  elem.setAttribute("href", url);
  elem.setAttribute("download", "export.xls"); // Choose the file name
  return false;
}
<table id="table" border="1">
  <tr>
    <td>
      Foo
    </td>
    <td>
      Bar
    </td>
  </tr>
</table>

<a id="downloadLink" onclick="exportF(this)">Export to excel</a>
Erweitern Sie das Snippet

— R3tep
quelle
Wie kann ich den Tabellenrand, die Breite usw. in der Funktion einstellen?
— Zeffry Reynando
7

TableExport

TableExport - Die einfache, leicht zu implementierende Bibliothek zum Exportieren von HTML-Tabellen in xlsx-, xls-, csv- und txt-Dateien.

Um diese Bibliothek zu verwenden, rufen Sie einfach den TableExportKonstruktor auf:

new TableExport(document.getElementsByTagName("table"));

// OR simply

TableExport(document.getElementsByTagName("table"));

// OR using jQuery

$("table").tableExport();

Zusätzliche Eigenschaften können übergeben werden, um das Erscheinungsbild Ihrer Tabellen, Schaltflächen und exportierten Daten anzupassen. Siehe hier mehr Infos

— Insign
quelle
Unterstützt es PhantomJs? Wie melde ich Fehler?
— Golimar
5

Meine Zusammenführung dieser Beispiele:

https://www.codexworld.com/export-html-table-data-to-excel-using-javascript https://bl.ocks.org/Flyer53/1de5a78de9c89850999c

function exportTableToExcel(tableId, filename) {
    let dataType = 'application/vnd.ms-excel';
    let extension = '.xls';

    let base64 = function(s) {
        return window.btoa(unescape(encodeURIComponent(s)))
    };

    let template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>';
    let render = function(template, content) {
        return template.replace(/{(\w+)}/g, function(m, p) { return content[p]; });
    };

    let tableElement = document.getElementById(tableId);

    let tableExcel = render(template, {
        worksheet: filename,
        table: tableElement.innerHTML
    });

    filename = filename + extension;

    if (navigator.msSaveOrOpenBlob)
    {
        let blob = new Blob(
            [ '\ufeff', tableExcel ],
            { type: dataType }
        );

        navigator.msSaveOrOpenBlob(blob, filename);
    } else {
        let downloadLink = document.createElement("a");

        document.body.appendChild(downloadLink);

        downloadLink.href = 'data:' + dataType + ';base64,' + base64(tableExcel);

        downloadLink.download = filename;

        downloadLink.click();
    }
}
— Roman Terekhov
quelle
1
Nicht gefangener Referenzfehler: base64 ist nicht definiert
— Pedro Joaquín
4

In Bezug auf Sampopes Antwort vom 6. Juni 14 um 11:59:

Ich habe einen CSS-Stil mit einer Schriftgröße von 20px eingefügt, um die Excel-Daten größer anzuzeigen. Im Sampopes-Code <tr>fehlen die führenden Tags, daher gebe ich zuerst die Überschrift und dann die anderen Tabellenzeilen innerhalb einer Schleife aus.

function fnExcelReport()
{
    var tab_text = '<table border="1px" style="font-size:20px" ">';
    var textRange; 
    var j = 0;
    var tab = document.getElementById('DataTableId'); // id of table
    var lines = tab.rows.length;

    // the first headline of the table
    if (lines > 0) {
        tab_text = tab_text + '<tr bgcolor="#DFDFDF">' + tab.rows[0].innerHTML + '</tr>';
    }

    // table data lines, loop starting from 1
    for (j = 1 ; j < lines; j++) {     
        tab_text = tab_text + "<tr>" + tab.rows[j].innerHTML + "</tr>";
    }

    tab_text = tab_text + "</table>";
    tab_text = tab_text.replace(/<A[^>]*>|<\/A>/g, "");             //remove if u want links in your table
    tab_text = tab_text.replace(/<img[^>]*>/gi,"");                 // remove if u want images in your table
    tab_text = tab_text.replace(/<input[^>]*>|<\/input>/gi, "");    // reomves input params
    // console.log(tab_text); // aktivate so see the result (press F12 in browser)

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

     // if Internet Explorer
    if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) {
        txtArea1.document.open("txt/html","replace");
        txtArea1.document.write(tab_text);
        txtArea1.document.close();
        txtArea1.focus(); 
        sa = txtArea1.document.execCommand("SaveAs", true, "DataTableExport.xls");
    }  
    else // other browser not tested on IE 11
        sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  

    return (sa);
}
— Bettelbursche
quelle
Können Sie mir bitte sagen, wie bestimmte Spalten aus dem Export nach Excel entfernt werden können? Zum Beispiel möchte ich vermeiden tab.rows[j].cells[13] , Ihre Hilfe wird wirklich geschätzt
— Disera
Sehr schöne Antwort, für eine sehr einfache Tabelle würde ich nur die letzte Zeile behalten: window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));Die Enconding ist sehr wichtig.
— Pere Seiten
4 

 function exportToExcel() {
        var tab_text = "<tr bgcolor='#87AFC6'>";
        var textRange; var j = 0, rows = '';
        tab = document.getElementById('student-detail');
        tab_text = tab_text + tab.rows[0].innerHTML + "</tr>";
        var tableData = $('#student-detail').DataTable().rows().data();
        for (var i = 0; i < tableData.length; i++) {
            rows += '<tr>'
                + '<td>' + tableData[i].value1 + '</td>'
                + '<td>' + tableData[i].value2 + '</td>'
                + '<td>' + tableData[i].value3 + '</td>'
                + '<td>' + tableData[i].value4 + '</td>'
                + '<td>' + tableData[i].value5 + '</td>'
                + '<td>' + tableData[i].value6 + '</td>'
                + '<td>' + tableData[i].value7 + '</td>'
                + '<td>' +  tableData[i].value8 + '</td>'
                + '<td>' + tableData[i].value9 + '</td>'
                + '<td>' + tableData[i].value10 + '</td>'
                + '</tr>';
        }
        tab_text += rows;
        var data_type = 'data:application/vnd.ms-excel;base64,',
            template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table border="2px">{table}</table></body></html>',
            base64 = function (s) {
                return window.btoa(unescape(encodeURIComponent(s)))
            },
            format = function (s, c) {
                return s.replace(/{(\w+)}/g, function (m, p) {
                    return c[p];
                })
            }

        var ctx = {
            worksheet: "Sheet 1" || 'Worksheet',
            table: tab_text
        }
        document.getElementById("dlink").href = data_type + base64(format(template, ctx));
        document.getElementById("dlink").download = "StudentDetails.xls";
        document.getElementById("dlink").traget = "_blank";
        document.getElementById("dlink").click();
    }
Erweitern Sie das Snippet

Hier sind die Werte 1 bis 10 Spaltennamen, die Sie erhalten

— Felsen
quelle
3

Mit tableToExcel.js können Sie Tabellen in Excel-Dateien exportieren.

Dies funktioniert folgendermaßen:

1). Fügen Sie dieses CDN in Ihr Projekt / Ihre Datei ein

<script src="https://cdn.jsdelivr.net/gh/linways/table-to-excel@v1.0.4/dist/tableToExcel.js"></script>

2). Entweder mit JavaScript: 

<button id="btnExport" onclick="exportReportToExcel(this)">EXPORT REPORT</button>

function exportReportToExcel() {
  let table = document.getElementsByTagName("table"); // you can use document.getElementById('tableId') as well by providing id to the table tag
  TableToExcel.convert(table[0], { // html code may contain multiple tables so here we are refering to 1st table tag
    name: `export.xlsx`, // fileName you could use any name
    sheet: {
      name: 'Sheet 1' // sheetName
    }
  });
}

3). Oder mit Jquery

<button id="btnExport">EXPORT REPORT</button>

$(document).ready(function(){
    $("#btnExport").click(function() {
        let table = document.getElementsByTagName("table");
        TableToExcel.convert(table[0], { // html code may contain multiple tables so here we are refering to 1st table tag
           name: `export.xlsx`, // fileName you could use any name
           sheet: {
              name: 'Sheet 1' // sheetName
           }
        });
    });
});

Weitere Informationen finden Sie unter diesem Github-Link

https://github.com/linways/table-to-excel/tree/master

oder um auf das Live-Beispiel zu verweisen, besuchen Sie den folgenden Link

https://codepen.io/rohithb/pen/YdjVbb

Hoffe das hilft jemandem :-)

— Aman Kumar Gupta
quelle
1

Meine Version von @sampopes antwortet

function exportToExcel(that, id, hasHeader, removeLinks, removeImages, removeInputParams) {
if (that == null || typeof that === 'undefined') {
    console.log('Sender is required');
    return false;
}

if (!(that instanceof HTMLAnchorElement)) {
    console.log('Sender must be an anchor element');
    return false;
}

if (id == null || typeof id === 'undefined') {
    console.log('Table id is required');
    return false;
}
if (hasHeader == null || typeof hasHeader === 'undefined') {
    hasHeader = true;
}
if (removeLinks == null || typeof removeLinks === 'undefined') {
    removeLinks = true;
}
if (removeImages == null || typeof removeImages === 'undefined') {
    removeImages = false;
}
if (removeInputParams == null || typeof removeInputParams === 'undefined') {
    removeInputParams = true;
}

var tab_text = "<table border='2px'>";
var textRange;

tab = $(id).get(0);

if (tab == null || typeof tab === 'undefined') {
    console.log('Table not found');
    return;
}

var j = 0;

if (hasHeader && tab.rows.length > 0) {
    var row = tab.rows[0];
    tab_text += "<tr bgcolor='#87AFC6'>";
    for (var l = 0; l < row.cells.length; l++) {
        if ($(tab.rows[0].cells[l]).is(':visible')) {//export visible cols only
            tab_text += "<td>" + row.cells[l].innerHTML + "</td>";
        }
    }
    tab_text += "</tr>";
    j++;
}

for (; j < tab.rows.length; j++) {
    var row = tab.rows[j];
    tab_text += "<tr>";
    for (var l = 0; l < row.cells.length; l++) {
        if ($(tab.rows[j].cells[l]).is(':visible')) {//export visible cols only
            tab_text += "<td>" + row.cells[l].innerHTML + "</td>";
        }
    }
    tab_text += "</tr>";
}

tab_text = tab_text + "</table>";
if (removeLinks)
    tab_text = tab_text.replace(/<A[^>]*>|<\/A>/g, "");
if (removeImages)
    tab_text = tab_text.replace(/<img[^>]*>/gi, ""); 
if (removeInputParams)
    tab_text = tab_text.replace(/<input[^>]*>|<\/input>/gi, "");

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

if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))      // If Internet Explorer
{
    myIframe.document.open("txt/html", "replace");
    myIframe.document.write(tab_text);
    myIframe.document.close();
    myIframe.focus();
    sa = myIframe.document.execCommand("SaveAs", true, document.title + ".xls");
    return true;
}
else {
    //other browser tested on IE 11
    var result = "data:application/vnd.ms-excel," + encodeURIComponent(tab_text);
    that.href = result;
    that.download = document.title + ".xls";
    return true;
}
}

Benötigt einen Iframe

<iframe id="myIframe" style="opacity: 0; width: 100%; height: 0px;" seamless="seamless"></iframe>

Verwendung

$("#btnExportToExcel").click(function () {
    exportToExcel(this, '#mytable');
});
— irfandar
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.