Fetch and Read Excel Sheets Data in HTML Table with JavaScript

Fetch and Read Excel Sheets Data in HTML Table with JavaScript . In today's video I will show you how to read and display Excel Sheets data in Html table using JavaScript.

Source code to Fetch and Read Excel Sheets Data in HTML Table with JavaScript


<!DOCTYPE html>
<html lang="en">

<head>
    <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>Excel Sheets to HTML Table</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js" integrity="sha512-r22gChDnGvBylk90+2e/ycr3RVrDi8DIOkIGNhJlKfuyQM4tIRAI062MaV8sfjQKYVGjOBaZBOA87z+IhZE9DA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <style>
        tr {
            background-color: gray;
        }
        
        tr:nth-child(2n) {
            background-color: lightgray;
        }
    </style>
</head>

<body>
    <div class="table"></div>
    <script>
        let table = document.querySelector(".table");
        (
            async() => {
                let workbook = XLSX.read(await (await fetch("./excel.xlsx")).arrayBuffer());
                console.log(workbook);
                let worksheet = workbook.SheetNames;
                worksheet.forEach(name => {
                    let html = XLSX.utils.sheet_to_html(workbook.Sheets[name]);
                    table.innerHTML += `
                    <h3>${name}</h3>${html}
                    `;
                })
            }
        )()
    </script>
</body>

</html>

Useful Links

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)