如何使用单个 id 导出多个 html 表以达到 excel

Question

I am having two html tables which are coming dynamically with different data.我有两个 html 表，它们动态地带有不同的数据。 Not able to export both to excel sheet i am willing to export single table.无法将两者都导出到 Excel 表，我愿意导出单个表。

<div class="data" style="display: block;">

    <table id="testTable" border="1">
    <tbody>
    <table style="width:300px">
    <tr>
      <td>John</td>
      <td>Doe</td>      
      <td>80</td>
    </tr>
    <tbody>
    </table>

</div>
<div class="data" style="display: block;">

    <table id="testTable" border="1">
    <tbody>
    <table style="width:300px">
    <tr>
      <td>vsr</td>
      <td>sub</td>      
      <td>90</td>
    </tr>
    <tbody>
    </table>

</div>

like this my table comes with different set of data from db像这样，我的表带有来自 db 的不同数据集

my js code is我的js代码是

var tableToExcel = (function() {
  var uri = '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>{table}</table></body></html>'
    , base64 = function(s) { return window.btoa(unescape((s))) }
    , format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) }

  return function(table, name, filename) {
    if (!table.nodeType) table = document.getElementById(resultarea)
    var ctx = {worksheet: name || 'Worksheet', table: resultarea.innerHTML}

    document.getElementById("dlink").href = uri + base64(format(template, ctx));
    document.getElementById("dlink").download = filename;
    document.getElementById("dlink").click();

  }
})()

not able to export to excel same time both table data.无法同时将两个表数据导出到 excel。 Please help me.请帮我。

Answer 1

You should reference by classname, not by id.您应该通过类名而不是 id 来引用。 Using the same id for more than one HTML element is not recommended for exactly the kind of error you're running into now.对于您现在遇到的那种错误，不建议对多个 HTML 元素使用相同的 id。

Answer 2

 <!DOCTYPE html> <html> <head> <form id="picsform" name="picsform"> <div class="formHeader"> <table> <tr> <td style="width: 170px; height:40px;" class="nobdrLtMid">reserved for company logo</td> <td class="formTitle" style="width: 650px;">PIC/S Checklist</td> </tr> <tr> <td class="nobdrRtMid" style="padding-left: 170px;"> <label for="Company">Company:</label> </td> <td class="nobdrLtMid" style="width: 200px;"> <input class="nobdrLtMid" type="text" id="Company" name="Company" title="Company" style="width: 100%"> </td> </tr> </table> <div class="clearBoth"></div> <table style="padding-bottom: 10px;"> <tr> <td class="nobdrRtMid" style="width: 100px;"> <label for="form.number">Form Number:</label> </td> <td class="nobdrLtMid" style="width: 125px;"> <input name="form.number" type="text" class="textfield" id="form.number" title="Form Number" style="width:100%;" /> </td> <td class="nobdrRtMid" style="width: 100px;"> <label for="form.created">Date Created:</label> </td> <td class="nobdrLtMid" style="width: 125px;"> <input name="form.created" type="text" class="textfield" id="form.created" title="Date Created" style="width:100%;" /> </td> <td class="nobdrRtMid" style="width: 100px;"> <label for="form.creatorname">Created By:</label> </td> <td class="nobdrLtTop" style="width: 150px;"> <input name="form.creatorname" type="text" id="form.creatorname" class="textfield" title="Creator Name" style="width:100%;"> </td> <td class="nobdrRtMid" style="width: 100px;"> <label for="route.stepname">Current Step:</label> </td> <td class="nobdrLtMid" style="width: 150px;"> <input name="route.stepname" type="text" class="textfield" id="route.stepname" title="Current Route Step" style="width:100%;" /> </td> </tr> </table> <div class="clearboth"></div> <a id="dlink" style="display:none;"></a> <div class="toolbar no-print" style="padding-left: 390px;"> <button class="tlb-btn toolbarBluebtn reset" style="margin-left:3px">Reset</button> <input type="button" class="tlb-btn toolbarGreenbtn submit" style="margin-left:12px" id="submit" name="submit" title="submit" value="Submit Form" /> <input id="ExporttoExcel" class="show" type="button" onclick="toExcel()" value="Export to Excel"> </div> </div> <div class="sectionData"> <table class="table" id="table" border="2"> <tbody> <tr> <th class="allbdrCenMidBld" style="width: 155px;">Topic</th> <th class="allbdrCenMidBld" style="width: 730px;">Question:</th> <th class="allbdrCenMidBld" style="width: 30px;">OK</th> <th class="allbdrCenMidBld" style="width: 35px;">NOK</th> <th class="allbdrCenMidBld" style="width: 30px;">N/A</th> </tr> <tr> <td class="allbdrCenTop">Introduction</td> <td class="allbdrLtMid">Please provide the following information: <br>&nbsp; <input type="checkbox" id="Gen01O1" name="Gen01O1">&nbsp; <label for="Gen01O1">- Company introduction</label> <br>&nbsp; <input type="checkbox" id="Gen01O2" name="Gen01O2">&nbsp; <label for="Gen01O2">- Product list</label> <br>&nbsp; <input type="checkbox" id="Gen01O3" name="Gen01O3">&nbsp; <label for="Gen01O3">- Latest audit results from authority</label> <br>&nbsp; <input type="checkbox" id="Gen01O4" name="Gen01O4">&nbsp; <label for="Gen01O4">- Next schedule for audit</label> </td> <td class="allbdrCenTop"> <input type="radio" id="rb_GEN_01a" name="rb_GEN_01" value="OK" /> </td> <td class="allbdrCenTop"> <input type="radio" id="rb_GEN_01b" name="rb_GEN_01" value="NOK" /> </td> <td class="allbdrCenTop"> <input type="radio" id="rb_GEN_01c" name="rb_GEN_01" value="NA" /> </td> </tr> <tr id="CGEN_01" style="display: none"> <td colspan="5"> <input id="ComGEN_01" type="text" value="" class="nobdrLtTopBl" placeholder="Comment on deficiency:" style="width:100%;" name="ComGEN_01" title="Com GEN 01" /> </td> </tr> </tbody> </table> </div> <div class="sectionData"> <table class="table" id="table" border="2"> <tbody> <tr> <th class="allbdrCenMidBld" style="width: 155px;">Topic</th> <th class="allbdrCenMidBld" style="width: 730px;">Question:</th> <th class="allbdrCenMidBld" style="width: 30px;">OK</th> <th class="allbdrCenMidBld" style="width: 35px;">NOK</th> <th class="allbdrCenMidBld" style="width: 30px;">N/A</th> </tr> <tr> <td class="allbdrCenTop">RM receiving</td> <td class="allbdrLtMid">Visual inspection receipt bay condition.</td> <td class="allbdrCenTop"> <input type="radio" id="rb_WHS_01a" name="rb_WHS_01" value="OK" /> </td> <td class="allbdrCenTop"> <input type="radio" id="rb_WHS_01b" name="rb_WHS_01" value="NOK" /> </td> <td class="allbdrCenTop"> <input type="radio" id="rb_WHS_01c" name="rb_WHS_01" value="NA" /> </td> </tr> <tr id="CWHS_01" style="display: none"> <td colspan="5"> <input id="ComWHS_01" type="text" value="" class="nobdrLtTopBl" placeholder="Comment on deficiency:" style="width:100%;" name="ComWHS_01" title="Com WHS 01" /> </td> </tr> <tr> <td class="allbdrCenTop"></td> <td class="allbdrLtMid">Do you have SOP to check received materials conditions including container management (eg damaged container, check against delivery note, quality, identity, conformity)?</td> <td class="allbdrCenTop"> <input type="radio" id="rb_WHS_02a" name="rb_WHS_02" value="OK" /> </td> <td class="allbdrCenTop"> <input type="radio" id="rb_WHS_02b" name="rb_WHS_02" value="NOK" /> </td> <td class="allbdrCenTop"> <input type="radio" id="rb_WHS_02c" name="rb_WHS_02" value="NA" /> </td> </tr> <tr id="CWHS_02" style="display: none"> <td colspan="5"> <input id="ComWHS_02" type="text" value="" class="nobdrLtTopBl" placeholder="Comment on deficiency:" style="width:100%;" name="ComWHS_02" title="Com WHS 02" /> </td> </tr> </tbody> </table> </div> </form> <script> $('input:radio').live('change', function(){ var sstrSect = ($(this).attr('name').substr([3])); var comFldId = ("C" + sstrSect); if ($(this).val() == "NOK"){ document.getElementById(comFldId).style.display = ''; } else { document.getElementById(comFldId).style.display = 'none'; } }); $('input[type="radio"]:checked').each(function() { var sstrSect = ($(this).attr('name').substr([3])); var comFldId = ("C" + sstrSect); if ($(this).val() == "NOK"){ document.getElementById(comFldId).style.display = ''; } else { document.getElementById(comFldId).style.display = 'none'; } }); function toExcel() { if ("ActiveXObject" in window) { alert("This is Internet Explorer!"); } else { var cache = {}; this.tmpl = function tmpl(str, data) { var fn = !/\\W/.test(str) ? cache[str] = cache[str] || tmpl(document.getElementById(str).innerHTML) : new Function("obj", "var p=[],print=function(){p.push.apply(p,arguments);};" + "with(obj){p.push('" + str.replace(/[\\r\\t\\n]/g, " ") .split("{{").join("\\t") .replace(/((^|}})[^\\t]*)'/g, "$1\\r") .replace(/\\t=(.*?)}}/g, "',$1,'") .split("\\t").join("');") .split("}}").join("p.push('") .split("\\r").join("\\\\'") + "');}return p.join('');"); return data ? fn(data) : fn; }; var tableToExcel = (function () { var uri = '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>{{for(var i=0; i<tables.length;i++){ }}<table>{{=tables[i]}}</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]; }); }; return function (tableList, name) { if (!tableList.length > 0 && !tableList[0].nodeType) table = document.getElementById(table); var tables = []; for (var i = 0; i < tableList.length; i++) { tables.push(tableList[i].innerHTML); } var ctx = { worksheet: name || 'Worksheet', tables: tables }; window.location.href = uri + base64(tmpl(template, ctx)); }; })(); tableToExcel(document.getElementsByTagName("table"), "one"); } } </script> </html>

如何使用单个 id 导出多个 html 表以达到 excel

问题描述

2 个解决方案

解决方案1
0 2014-08-07 08:07:48

解决方案2
0 2020-05-19 10:06:54

如何使用单个 id 导出多个 html 表以达到 excel

问题描述

2 个解决方案

解决方案1 0 2014-08-07 08:07:48

解决方案2 0 2020-05-19 10:06:54

解决方案1
0 2014-08-07 08:07:48

解决方案2
0 2020-05-19 10:06:54