【问题标题】:how to export multiple html tables to excel with single id如何将多个html表导出到具有单个id的excel
【发布时间】:2014-09-30 08:48:09
【问题描述】:

我有两个带有不同数据的 html 表。无法将两者都导出到 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>

像这样,我的表带有来自 db 的不同数据集

我的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();

  }
})()

无法同时将两个表格数据导出到 Excel。请帮帮我。

【问题讨论】:

  • 相同的 id 不起作用,请改用类名或更改为不同的 id,并附加/前置 1,2,3 etc. 之类的东西。

标签: javascript jquery html excel dom


【解决方案1】:

您应该通过类名而不是 id 来引用。对于您现在遇到的错误类型,不建议对多个 HTML 元素使用相同的 id。

【讨论】:

    【解决方案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 (e.g. 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 的表,并且它的工作完美!!
    猜你喜欢
    • 2014-08-29
    • 2023-03-21
    • 1970-01-01
    • 2016-12-06
    • 1970-01-01
    • 2020-10-03
    • 1970-01-01
    • 2020-11-23
    • 1970-01-01
    相关资源
    最近更新 更多