Introduction
I recently received a message from someone working on a tribute project. They were trying to capture an HTML table and convert it into a CSV file but faced issues with the CSS file not being fetched correctly. Here’s a step-by-step explanation of how to capture a table from HTML and convert it to CSV.
Problem
The issue here is twofold: capturing an HTML table and converting it to CSV format, along with troubleshooting why the CSS file may not be properly linked to the HTML document.
Example Error:
HTML Table:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sample Table</title>
<!-- Incorrect CSS File Path -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<table id="myTable">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>30</td>
</tr>
<tr>
<td>Jane</td>
<td>25</td>
</tr>
</table>
</body>
</html>
Problem:
- The CSS file is not fetching correctly because of an incorrect file path.
- There’s no logic to capture the table and convert it to CSV format.
Solution:
We will solve two issues here: fixing the CSS file link and writing JavaScript to extract the HTML table data and convert it to a CSV file.
Fixing the CSS Link:
Make sure the path to the CSS file is correct. If your CSS is in a separate folder (e.g., /css/), adjust the path like this:
<link rel="stylesheet" href="./css/style.css">
Capturing the Table and Converting it to CSV:
Now, let’s write JavaScript to extract the HTML table and convert it to CSV format.
Corrected HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sample Table</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<table id="myTable">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>30</td>
</tr>
<tr>
<td>Jane</td>
<td>25</td>
</tr>
</table>
<button onclick="tableToCSV()">Download CSV</button>
<script>
function tableToCSV() {
var table = document.getElementById("myTable");
var rows = table.querySelectorAll("tr");
var csv = [];
rows.forEach(row => {
var cols = row.querySelectorAll("td, th");
var rowData = [];
cols.forEach(col => {
rowData.push(col.innerText);
});
csv.push(rowData.join(","));
});
// Create a CSV file and download it
var csvFile = new Blob([csv.join("\n")], { type: "text/csv" });
var downloadLink = document.createElement("a");
downloadLink.download = "table.csv";
downloadLink.href = window.URL.createObjectURL(csvFile);
downloadLink.style.display = "none";
document.body.appendChild(downloadLink);
downloadLink.click();
}
</script>
</body>
</html>
Explanation:
- JavaScript Function: We loop through the rows and cells of the table and capture the text content.
- CSV Creation: We convert the collected data into CSV format using JavaScript and initiate a download of the CSV file.
- Download CSV: A button is added to trigger the CSV download.
Conclusion:
This simple JavaScript solution captures an HTML table and converts it into a downloadable CSV file. Make sure to check the CSS path if it’s not working properly and use the correct JavaScript code for CSV conversion.