herunterladen HTML-Tabelle colspan und rowspan nicht abgeholt

Question

Ich habe folgende HTML-Tabelle:

<a href="#" id ="download" role='button' class="button">Download</a> 
<div id="dvData" class="table-responsive"> 
    <table class="table table-bordered" id="example"> 
     <thead> 
     <tr> 
      <th rowspan="3">Example</th> 
      <th colspan="7">Larger Header</th> 
     </tr> 
     <tr class="table_headers"> 
      <th colspan="3">Sub Header 1</th> 
      <th colspan="3">Sub Header 2</th> 
      <th rowspan="2" class="align-middle">Sub Header 3</th> 
     </tr> 
     <tr class="table_headers"> 
      <th>Sub sub header</th> 
      <th>Sub sub header</th> 
      <th>Sub sub header</th> 
      <th>Sub sub header</th> 
      <th>Sub sub header</th> 
      <th>Sub sub header</th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr> 
      <td> Info</td> 
      <td> Info</td> 
      <td> Info</td> 
      <td> Info</td> 
      <td> Info</td> 
      <td> Info</td> 
      <td> Info</td> 
      <td> Info</td> 
      <td> Info</td> 
      <td> Info</td> 
     </tr> 
     </tbody> 
    </table> 
</div> 

Und ich habe folgendes JavaScript, um die Tabelle zum Download:

function exportTableToCSV($table, filename) {//used to export tables 
     var $headers = $table.find('tr:has(th)') 
      ,$rows = $table.find('tr:has(td)') 
      ,tmpColDelim = String.fromCharCode(11) // vertical tab character 
      ,tmpRowDelim = String.fromCharCode(0) // null character 
      ,colDelim = '","' 
      ,rowDelim = '"\r\n"'; 

      var csv = '"'; 
      csv += formatRows($headers.map(grabRow)); 
      csv += rowDelim; 
      csv += formatRows($rows.map(grabRow)) + '"'; 

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

     if (window.navigator.msSaveOrOpenBlob) { 
      var blob = new Blob([decodeURIComponent(encodeURI(csv))], { 
       type: "text/csv;charset=utf-8;" 
      }); 
      navigator.msSaveBlob(blob, filename); 
     } else { 
      $(this) 
       .attr({ 
        'download': filename 
        ,'href': csvData 
      }); 
     } 
     function formatRows(rows){ 
      return rows.get().join(tmpRowDelim) 
       .split(tmpRowDelim).join(rowDelim) 
       .split(tmpColDelim).join(colDelim); 
     } 
     function grabRow(i,row){ 

      var $row = $(row); 
      var $cols = $row.find('td'); 
      if(!$cols.length) $cols = $row.find('th'); 

      return $cols.map(grabCol) 
         .get().join(tmpColDelim); 
     } 
     function grabCol(j,col){ 
      var $col = $(col), 
       $text = $col.text(); 

      return $text.replace('"', '""'); // escape double quotes 

     } 
    } 
$("#download").click(function (event) { 
     outputFile = "example.csv" 
     exportTableToCSV.apply(this, [$('#dvData > table'), outputFile]); 
    }); 

Wenn ich die Datei herunterladen Header werden durcheinander gebracht. Die Colspan- und Rowspan-Eigenschaften werden nicht beibehalten. Wie repariere ich das?

EDIT: Hier ist die Geige https://jsfiddle.net/ALUW/2s1z9pa9/

Answer 1

Vielleicht ist es nicht genau das, was Sie wollen, aber es nach Excel exportieren können, behalten die Header genau so, wie Sie wollen:

prüfen diese https://jsfiddle.net/f2qh0t2b/1/

function generateExcel(el) { 
    var clon = el.clone(); 
    var html = clon.wrap('<div>').parent().html(); 

    //add more symbols if needed... 
    while (html.indexOf('á') != -1) html = html.replace(/á/g, '&aacute;'); 
    while (html.indexOf('é') != -1) html = html.replace(/é/g, '&eacute;'); 
    while (html.indexOf('í') != -1) html = html.replace(/í/g, '&iacute;'); 
    while (html.indexOf('ó') != -1) html = html.replace(/ó/g, '&oacute;'); 
    while (html.indexOf('ú') != -1) html = html.replace(/ú/g, '&uacute;'); 
    while (html.indexOf('º') != -1) html = html.replace(/º/g, '&ordm;'); 
    html = html.replace(/<td>/g, "<td>&nbsp;"); 

    window.open('data:application/vnd.ms-excel,' + encodeURIComponent(html)); 
} 
$("#download").click(function (event) { 
    generateExcel($("#example")); 
});