Question

我在div中有一个HTML表，在span元素中有更多数据

我想做的是将所有整个div容器导出到excel，但这只是导出表

我正在使用table2excel插件导出表

我的代码

$("#export-btn").click(function() {
  $("#printFull").table2excel({
    filename: "FileName"
  });
});

var tableValue = [{
    "Code": "1040",
    "Item Name": "VEG CHESSE SANDWICH PACKED ",
    "UOM": "NOS",
    "TO Qty": "2.0000",
    "AcceptedQty": "1.0000"
  },
  {
    "Code": "1115",
    "Item Name": "CHICKEN MAYO S/W (CUT INTO 2)",
    "UOM": "NOS",
    "TO Qty": "4.0000",
    "AcceptedQty": "4.0000"
  },
  {
    "Code": "1119",
    "Item Name": "VEGETABLE BURGER ",
    "UOM": "NOS",
    "TO Qty": "2.0000",
    "AcceptedQty": "2.0000"
  },
  {
    "Code": "1120",
    "Item Name": "CHICKEN  BURGER",
    "UOM": "NOS",
    "TO Qty": "2.0000",
    "AcceptedQty": "2.0000"
  },
  {
    "Code": "1053",
    "Item Name": "PUNJABI SAMOSA",
    "UOM": "NOS",
    "TO Qty": "8.0000",
    "AcceptedQty": "8.0000"
  },
  {
    "Code": "1513",
    "Item Name": "CHOCOLATE CUP CAKE",
    "UOM": "NOS",
    "TO Qty": "3.0000",
    "AcceptedQty": "3.0000"
  },
  {
    "Code": "1514",
    "Item Name": "RED VELVETTE CUP CAKE",
    "UOM": "NOS",
    "TO Qty": "3.0000",
    "AcceptedQty": "3.0000"
  }
]

function addTableAcceptance(tableValue) {
  var col = Object.keys(tableValue[0]);
  var countNum = col.filter(i => !isNaN(i)).length;
  var num = col.splice(0, countNum);
  col = col.concat(num);
  var table = document.createElement("table");
  var tr = table.insertRow(-1);
  for (var i = 0; i < col.length; i++) {
    var th = document.createElement("th");
    th.innerHTML = col[i];
    tr.classList.add("text-center");
    tr.appendChild(th);
  }
  for (var i = 0; i < tableValue.length; i++) {
    tr = table.insertRow(-1);
    for (var j = 0; j < col.length; j++) {
      var tabCell = tr.insertCell(-1);
      var tabledata = tableValue[i][col[j]];
      if (tabledata && !isNaN(tabledata)) {
        tabledata = parseInt(tabledata)
      }
      tabCell.innerHTML = tabledata;

      if (col[j] === 'TO Qty' || col[j] === 'AcceptedQty') {
        tabCell.classList.add("text-right");
        tabCell.classList.add("test"); // this the class given by me to these two columns
      }

    }
  }
  var divContainer = document.getElementById("tableID");
  divContainer.innerHTML = "";
  divContainer.appendChild(table);
  table.classList.add("table");
  table.classList.add("table-striped");
  table.classList.add("table-bordered");
  table.classList.add("table-hover");


}
addTableAcceptance(tableValue)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://cdn.rawgit.com/rainabba/jquery-table2excel/1.1.0/dist/jquery.table2excel.min.js"></script>

<div class="table-responsive">
  <div id="printFull">

    <span id="printOutlet">Vivek</span>
    <span id="printOutletCode">kumar</span>
    <span id="toNumber">hwellow</span>
    <span id="toDate">test</span>
    <span id="printDateTime">test1</span>


    <table id=tableID></table>
  </div>
</div>
<button id="export-btn" class="btn btn-default commonButton">
	Export
	</button>

大家都可以看到我有一个printFull的div元素ID，里面有一些span元素，我的表也要按原样导出整个div printFull

但这只是导出表

在这里我使用table2excel插件，如果还有其他方法可以解决这个问题，那么我也很乐意

Answer 1

我还没有亲自使用table2excel插件，但是如果它确实是它的名字所暗示的，那么它可能仅支持table元素，在这种情况下，最好更改一下div插入表格，但这还取决于插件是否可以解释嵌套的表格数据。

另一种方法是将HTML序列化为其他数据格式（我建议使用JSON），该数据格式可以通过其他方式导入Excel。我知道使用C＃可以达到这一目的的方法很多，但不幸的是，使用Javascript或JQuery不能给我太多帮助。

希望这会有所帮助。

Answer 2

尝试

<table id="printFull">
	<tr>
		<td>
		
    <span id="printOutlet">Vivek</span>
    <span id="printOutletCode">kumar</span>
    <span id="toNumber">hwellow</span>
    <span id="toDate">test</span>
    <span id="printDateTime">test1</span>
		</td>
	</tr>

<tr>
	<td>
		
    <table id=tableID></table>
	</td>
</tr>
  </table>

如何使用其他数据导出HTML表

2 个答案: