Site icon FSIBLOG

How To Capture Table From HTML and Convert It To CSV File?

Shaheen Ullah
How To Capture Table From HTML and Convert It To CSV File?

How To Capture Table From HTML and Convert It To CSV File?

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:

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:

  1. JavaScript Function: We loop through the rows and cells of the table and capture the text content.
  2. CSV Creation: We convert the collected data into CSV format using JavaScript and initiate a download of the CSV file.
  3. 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.

Exit mobile version