如何导出带有附加数据的 HTML 表格

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>

你们都可以看到我有一个 div 元素 id 为 printFull，其中我有一些 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>