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
Top comments (0)