Export HMTL table to CSV with spanned rows and columns

Question

I am having a table in HTML which is spanned in both rows and columns and looks kinda complex. I need a way to export this table to CSV File on a button click.

The following is the code for the table,

<table class="table table-bordered">
<thead class="thead-dark">
  <tr>
     <th scope="col">Fruit Name</th>
     <th scope="col">Type</th>
     <th scope="col" colspan="3">Features</th>
     <th scope="col">Recommended Values</th>
  </tr>
</thead>
<tbody ng-repeat="x in response">
  <tr>
     <th  rowspan="6"><b>{{x.FruitName}}</b></th>
     <td rowspan="6"><b>{{x.FruitType}}</b></td>
     <td rowspan="3">Color</td>
     <td>Outer </td>
     <td><b>{{x.Outer}}</b></td>
     <td>Green/Black</td>
  </tr>
  <tr>
     <td>Inner</td>
     <td><b>{{x.Inner}}</b></td>
     <td>Red</td>
  </tr>
  <tr>
     <td>Seed</td>
     <td><b>{{x.Seed}}</b></td>
     <td>Seedless</td>
  </tr>
  <tr>
     <td rowspan="2">Water</td>
     <td>Sweet</td>
     <td><b>{{x.Sweet}}</b></td>
     <td>80%</td>
  </tr>
  <tr>
     <td>Sour</td>
     <td><b>{{x.Sour}}</b></td>
     <td>10%</td>
  </tr>
  <tr>
     <td rowspan="1">Weight</td>
     <td>Body Wt</td>
     <td ><b>{{x.weight}}</b></td>
     <td>500gm</td>
  </tr>
</tbody>

I have tried using this,

function exportTableToCSV(filename) {
        var csv = [];
        var rows = document.querySelectorAll("table tr");

        for (var i = 0; i < rows.length; i++) {
            var row = [], cols = rows[i].querySelectorAll("td, th");

            for (var j = 0; j < cols.length; j++) 
                row.push(cols[j].innerText);

            csv.push(row.join(","));        
        }
        downloadCSV(csv.join("\n"), filename);
    }
    function downloadCSV(csv, filename) {
        var csvFile;
        var downloadLink;
        csvFile = new Blob([csv], {type: "text/csv"});
        downloadLink = document.createElement("a");
        downloadLink.download = filename;
        downloadLink.href = window.URL.createObjectURL(csvFile);
        downloadLink.style.display = "none";
        document.body.appendChild(downloadLink);
        downloadLink.click();
    }

But the output I am getting is not exactly what I have mentioned in the image. How to exactly import HTML table to CSV as it is. PS: Even more spaned rows and columns can be added

Kriskó Tamás · Answer 1 · 2020-05-03T09:53:10.947

0

I've tried out your code and it's fine. I've also found a link which uses the same technique to convert the table. I assume that you think this is not normal, but that's how it should work.

The exported CSV looks like this:

Fruit Name,Type,Feature,Recommended
Watermelon,melon,Color,Outer,Green,Black/Green
Inner,Red,Red
Seed,Black,Seedless
Water,Sweet,50%,80%
Sour,20%,10%
Weight,Body Wt,400gm,500gm

As you can see, the 2nd row on the 1st cell takes up 6 rows of space. In the CSV file, the bigger row's content doesn't appear in the next rows, beause it's already there.

However, excel exports tables this way too, and the row- and colspans are not stored in CSV files, you can lose some information after converting.

I also found an answer, which is really detailed.

edited May 03 '20 at 09:53

answered May 03 '20 at 09:33

Kriskó Tamás

111
1
2
10

Thanks for the reply. I need to export the Table as it is, s=in some form of Xcel document for better readibility. You can say I need a snapshot of a table to download from my website. DO uyou have any ideas? – May 03 '20 at 13:35
1

You definitely need to look at the table after exporting to check where the bigger cells are positioned. For a better, and faster solution, this [link](https://stackoverflow.com/questions/22317951/export-html-table-data-to-excel-using-javascript-jquery-is-not-working-properl) may help you. This converts html table directly into excel's xls format. – Kriskó Tamás May 04 '20 at 15:54

Export HMTL table to CSV with spanned rows and columns

1 Answers1