如何将多个html表导出到具有单个id的excel

问题描述 投票：0回答：2

我有两个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。请帮助我。

javascript jquery html excel dom
2个回答
0
投票

您应按类名而不是ID进行引用。对于您现在遇到的错误类型，不建议对多个HTML元素使用相同的ID。

0
投票
<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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.