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

Question

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

导出到Excel时，excel文件包含table的标签和值(<table> <tr> <td>value</td><td>value</td>...</tr>)，看起来一团糟！但是，如果我删除 <table> 中的所有描述和 class，当导出到 Excel 时，它看起来很好（没有 <table> <tr> <td>... 标签）。

一个问题是如何在不删除描述和 <table> 中的 class 的情况下使导出的 Excel 看起来很好？谢谢！

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>3.00</td>
        </tr>
        <tr>
            <td>BLUE</td>
            <td>111</td>
            <td>.00</td>
        </tr>
        <tr>
            <td>GREEN</td>
            <td>555</td>
            <td>3.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

您是否考虑过使用 excel.CSV 文件？
您可以将表项目移动到一个字符串中，项目之间用逗号分隔。希望这有帮助。

Answer 2

您可以使用jQuery的clone and 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>

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

Export to Excel - Issue in Chrome and Firefox

html

firefox

jquery

google-chrome

export-to-excel