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

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

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)

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

Sie können dazu eine Bibliothek wie ShieldUI verwenden.

Es unterstützt den Export in häufig verwendete XML- und XLSX-Excel-Formate.

Weitere Details hier: http://demos.shieldui.com/web/grid-general/export-to-excel

Vladimir Georgiev
quelle

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/[email protected]/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

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

Antworten: