Export HTML Table to CSV with JavaScript | HTML 2 CSV | convert html table to csv | JS

Export HTML Table to CSV with JavaScript | HTML 2 CSV | convert html table to csv | JS Hello friend's in this video I'm going to show you how to export html table data to csv file. I hope this video will help you to expertise your Javascript skill.

Source code to export HTML Table to CSV with JavaScript


<!DOCTYPE html>
<html lang="en">
<head>
    <!-- tutorial link : https://youtu.be/2_Q9DBL-vZE -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html2csv</title>
    <style>
        table {
            background-image: linear-gradient(to top left, rgb(202, 103, 103), rgb(231, 131, 131), rgb(228, 175, 175));
            width: 100%;
        }

        td,
        th {
            border: 3px solid rgba(255, 255, 255, 0.589);
            color: white;
            letter-spacing: 0.1rem;
            text-align: center;
            font-size: 2rem;
        }
    </style>
</head>
<body>
    <table> 
        <thead>
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>Gender</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Subash</td>
                <td>24</td>
                <td>Male</td>
            </tr>
            <tr>
                <td>Subham</td>
                <td>21</td>
                <td>Male</td>
            </tr>
            <tr>
                <td>Tanya</td>
                <td>26</td>
                <td>Female</td>
            </tr>
            <tr>
                <td>Geeta</td>
                <td>22</td>
                <td>Female</td>
            </tr>
            <tr>
                <td>shyam</td>
                <td>29</td>
                <td>Male</td>
            </tr>
            <tr>
                <td>Aditya</td>
                <td>27</td>
                <td>Male</td>
            </tr>
        </tbody>

    </table>

    <script>
        let csv = [];
        let tr = document.querySelectorAll("tr");
        for (let i = 0; i < tr.length; i++) {
            // console.log(tr[i]);
            let cols = tr[i].querySelectorAll("th,td");
            let csvRow = [];
            for (j = 0; j < cols.length; j++) {
                csvRow.push(cols[j].innerHTML)
            }
            csv.push(csvRow.join(","))
            // console.log(csvRow.join(","));
        }
        console.log(csv.join("\n"));
        let blob = new Blob([csv.join("\n")], { type: "text/csv" });
        let ce = document.createElement("a");
        ce.innerHTML = "Download";
        ce.download = "codewithsundeep"
        ce.href = URL.createObjectURL(blob);
        document.body.appendChild(ce);
    </script>
</body>
</html>

Useful Links

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)