导出到Excel - Chrome和Firefox中的问题

Question

我有表并使用JS导出到Excel。 <table>标签有一些说明和类(<table class="someClassName" border="0" cellpadding="0" cellspacing="0">)。

当它导出到Excel时，excel文件包含表标签和值（<table> <tr> <td>value</td><td>value</td>...</tr>），看起来像一团糟！但是，如果我删除<table>中的所有说明和类，则在导出到Excel时，它看起来很好（没有<table> <tr> <td>...标记）。

一个问题是如何使导出的Excel看起来很好，但不删除<table>中的描述和类？谢谢！

HTML

<div class="dvData"> 
    <table class="header_detail" border="0" cellpadding="0" cellspacing="0"> 
     <tr> 
      <th>Billing System</th> 
      <th>Market Code</th> 
      <th>Payment Amount</th> 
     </tr> 
     <tr> 
      <td>RED</td> 
      <td>222</td> 
      <td>$103.00</td> 
     </tr> 
     <tr> 
      <td>BLUE</td> 
      <td>111</td> 
      <td>$13.00</td> 
     </tr> 
     <tr> 
      <td>GREEN</td> 
      <td>555</td> 
      <td>$143.00</td> 
     </tr> 
    </table> 
    </div> 
<br /> 
<input type="button" value="Export" class="toExcelButton" data-target="dvData" /> 

JS

$(document).ready(
     function() 
     { 
      $(".toExcelButton").click(function(e) { 
      e.stopPropagation(); 
      var table = $("." + $(this).data('target')); 
      window.open('data:application/vnd.ms-excel,' + $(table).html()); 
      e.preventDefault(); 
      }); 
     } 
    ); 

Answer 1

你可以使用jQuery的clone和removeAttr函数来解决这个问题。

var newTable = $('#exportme').clone(), 
 
    wrapper = $('<div>').append(newTable); 
 

 
// For each element within the table (including the table)... 
 
$.each($('*', wrapper), function(i, elem){ 
 
    
 
    // Build a list of all attribute names... 
 
    var attributeNames = []; 
 
    $.each(elem.attributes, function(i, att) { 
 
    attributeNames.push(att.nodeName); 
 
    }); 
 
    
 
    // Then remove them. 
 
    attributeNames.forEach(function(attName){ 
 
    $(elem).removeAttr(attName); 
 
    }) 
 
}); 
 

 
$('#result').text(wrapper.html()); 
 

 
// Your final table will have no attributes... 
 
console.log(newTable[0]); 
 
// But your original table will be untouched. 
 
console.log($('#exportme')[0]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table id="exportme" class="foo" data-bar="baz" style="display:none;"> 
 
    <tr class="firstr0w"> 
 
    <td data-foobar="baz">But keep my data!</td> 
 
    </tr> 
 
</table> 
 
<div id="result"></div>