Exporting HTML table to Excel without hidden <td>tag-CodePudding

In my web application, I have an HTML table that shows some data to the user.

Here I want to export it to excel and I found a jQuery code to do that.

But the thing is it's also export the data that I hide from the table.

Is there any way to export the table without the <td style="display:none;"> @Html.DisplayFor(modelItem => item.Id) </td>

This is the table

 <table id="tblParts" >
   <thead>
     <tr>
       <th> Part Number </th>
       <th> Description </th>
       <th> Model </th>
       <th> Order Qty </th>
       <th></th>
     </tr>
   </thead>
   <tbody> @foreach (var item in Model.OrderBy(i => i.PartNumber)) { <tr>
       <td style="display:none;"> @Html.DisplayFor(modelItem => item.Id) </td>
       <td> @Html.DisplayFor(modelItem => item.PartNumber) </td>
       <td> @Html.DisplayFor(modelItem => item.Description) </td>
       <td> @Html.DisplayFor(modelItem => item.Model) </td>
       <td> @Html.DisplayFor(modelItem => item.OrderQty) </td>
     </tr> } </tbody>
 </table>

This is the Jquery.

function ExportToExcel(type, fn, dl) {
  var elt = document.getElementById('tblParts');
  var wb = XLSX.utils.table_to_book(elt, {
    sheet: "sheet1"
  });
  return dl ?
    XLSX.write(wb, {
      bookType: type,
      bookSST: true,
      type: 'base64'
    }) :
    XLSX.writeFile(wb, fn || ('Order.'   (type || 'xlsx')));
}

CodePudding user response：

Maybe before you export, you can remove the hidden column inside the export function. Give the hidden column a class name. I've attached a fiddle for your reference:

example

HTML

<table id="tblParts" >
    <thead>
        <tr>
            <th>Part Number </th>
            <th>Description </th>
            <th>Model </th>
            <th>Order Qty </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="display: none;" >1 </td>
            <td>2</td>
            <td>3 </td>
            <td>4 </td>
            <td>5 </td>
        </tr>
        <tr>
            <td style="display: none;" >2 </td>
            <td>2</td>
            <td>3 </td>
            <td>4 </td>
            <td>5 </td>
        </tr>
    </tbody>
</table>

    function ExportToExcel(type, fn, dl) {
            var elt = document.getElementById('tblParts');
            const elements = elt.getElementsByClassName("item-id"); //get column with the class name item-id
            while (elements.length > 0) elements[0].remove(); //if element exist, remove the column

            var wb = XLSX.utils.table_to_book(elt, {
                sheet: "sheet1"
            });
            return dl ?
                XLSX.write(wb, {
                    bookType: type,
                    bookSST: true,
                    type: 'base64'
                }) :
                XLSX.writeFile(wb, fn || ('Order.'   (type || 'xlsx')));
        }