How to Export HTML table with additional data

Question

I have a HTML table inside div and have some more data inside span element

what i am trying to do is export all whole div container to excel,but it is only exporting table

i am using table2excel plugin to export the table

My code

$("#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>

As you all can see i have a div element id as printFull inside which i have some span elements and the my table i want to export the whole div printFull as it is

but it is only exporting table

here i am using table2excel plugin if there is any other way to resolve this then i am open to that also

score 0 · Answer 1 · answered Apr 04 '19 at 12:17

0

I have not personally used the table2excel plugin, but if it is exactly what it's name implies, then it probably only supports table elements, in which case it may be better for you to change your div into a table, but that also depends on whether the plugin can interpret nested table data.

Another approach would be to serialize your HTML into another data format (I would recommend JSON) that can be imported into Excel through another means. I know of numerous ways to achive this using C#, but unfortunately I cannot be of much more help using Javascript or JQuery.

Hope this helps.

answered Apr 04 '19 at 12:17

Stuyvenstein

2,340
1
27
33

i have tried with table as i have created two tables but still it is exporting only one table – vivek singh Apr 04 '19 at 12:20
So that means the library does not support nested tables. You may want to try consolidating all your data into a single table, but my thinking is that it won't help you, since Excel itself basically acts as a single tier table and as such, I doubt it'll be able to display 'nested' data. Perhaps you should try a different approach like HTML serialization. – Stuyvenstein Apr 04 '19 at 12:27
is there any other plugin or plain java-script by which i can export all data – vivek singh Apr 04 '19 at 12:30
You can use javascript and grab the `innerHtml` of the uppermost element (your root table) and then you'll need to get that into Excel. Unfortunately my experience with such tasks are restricted to C#, but a quick google shows multiple ways that this can be achieved, but personally I would recommend that such tasks happen on the server, rather than the client. Maybe try this: https://stackoverflow.com/questions/17126453/html-table-to-excel-javascript Sorry I cannot be of much use otherwise. – Stuyvenstein Apr 04 '19 at 12:42

score 0 · Answer 2 · answered Apr 04 '19 at 12:27

Try this

<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>

How to Export HTML table with additional data

2 Answers2