How to convert html table to CSV file

To convert a table to csv file you have to create html table and then give the table tag an id for referencing the table.

<!DOCTYPE html>
<html>
<head>
  <title>how to convert table to CSV file</title>
</head>
<body>
      <table style="width:100% "id="id1">


 <tbody>
  <tr>
    <td>Product</td>
    <td>Price</td>
  </tr>
    <tr>

     <td>orange</td>
     <td>#210</td>
    </tr>


    <tr>

      <td>apple</td>
      <td>#400</td>
    </tr>

    </tbody>

</table>

<button onclick="download_table_as_csv();">Convert To CSV File</button>

now we'll now create js code that will convert the table to csv file

<script >
              function download_table_as_csv(table_id="id1", separator = ",") {
                // Select rows from table_id
                var rows = document.querySelectorAll("table#" + table_id + " tr");
                // Construct csv
                var csv = [];
                  //looping through the table
                for (var i = 0; i < rows.length; i++) {
                    var row = [], cols = rows[i].querySelectorAll("td, th");
                       //looping through the tr
                    for (var j = 0; j < cols.length; j++) {
                       // removing space from the data
                        var data = cols[j].innerText.replace(/(\r\n|\n|\r)/gm, "").replace(/(\s\s)/gm, " ")
                         // removing double qoute from the data
                        data = data.replace(/"/g, `""`);
                        // Push escaped string
                        row.push(`"` + data + `"`);
                    }
                    csv.push(row.join(separator));
                }
                var csv_string = csv.join("\n");
                // Download it
                var filename = "export_" + table_id + "_" + new Date().toLocaleDateString() + ".csv";
                var link = document.createElement("a");
                link.style.display = "none";
                link.setAttribute("target", "_blank");
                link.setAttribute("href", "data:text/csv;charset=utf-8," + encodeURIComponent(csv_string));
                link.setAttribute("download", filename);
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            }

             </script>
</body >
</html>

when you click on the Convert To CSV File button the table will convert to csv file

Am always ready to learn, for any addition feel-free to comment

Blog

How to convert html table to CSV file

popoola Temitope

Join Our Newsletter. No Spam, Only the good stuff.

Related