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

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

Answer 1

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.

Answer 2

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>