保存到 Excel 时并排加载 html table

Question

我试图将页面上的几个 html 表另存为 Excel。我可以将它们保存到 excel，但问题是我无法并排加载它们，它们只是一个接一个地出现。

这是HTML

<table id="1" style="display: inline-block;">
    <tr><th>Name</th><th>Age</th><th>Country</th></tr>
    <tr><td>Geronimo</td><td>26</td><td>France</td></tr>
    <tr><td>Natalia</td><td>19</td><td>Spain</td></tr>
    <tr><td>Silvia</td><td>32</td><td>Russia</td></tr>
</table>

<table id="2" style="float: left;">
    <tr><th>Pet</th><th>Breed</th><th>Type</th></tr>
    <tr><td>Roscoe</td><td>Pug</td><td>Dog</td></tr>
    <tr><td>Polly</td><td>Parrot</td><td>Bird</td></tr>
    <tr><td>Whiskers</td><td>Calico</td><td>Cat</td></tr>
</table>
<br/>
<table id="3">
    <tr><th>Pet</th><th>Breed</th><th>Type</th></tr>
    <tr><td>Roscoe</td><td>Pug</td><td>Dog</td></tr>
    <tr><td>Polly</td><td>Parrot</td><td>Bird</td></tr>
    <tr><td>Whiskers</td><td>Calico</td><td>Cat</td></tr>
</table>
  <input type="button" id="btnExport" title="excel" value="Export" />

这是客户端脚本

$("#btnExport").click(function () {
    fnExcelReport();
});


function fnExcelReport()
{
    var tab_text = "";
    var tab_text= tab_text + "<table border='2px'><tr bgcolor='#87AFC6'>";
    var textRange; var j=0;
    tab = document.getElementById('1'); // 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>";

    var tab_text= tab_text + "<table border='2px'><tr bgcolor='#87AFC6'>";
    var textRange; var j=0;
    tab = document.getElementById('2'); // 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>";


    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);
}

最后是 fiddle link Fiddle

有人可以看看并告诉我如何让 UI 中并排的表格在 Excel 中以相同的方式显示吗？

Answer 1

所以基本上这可以使用 html 技巧来实现..添加一个 master table 和内部 td 来包含 tables.

<table> 
   <tr> 
      <td>table 1 code with all the html</td>
      <td>table 2 code with all the html</td>
   </tr>
</table>

保存到 Excel 时并排加载 html table

Load html table side by side when saving to Excel

html

javascript

css

vbscript

jquery