JSFiddle - React, Tailwind, and code Playground

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Excel Export with ExcelJS</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/exceljs/4.3.0/exceljs.min.js"></script>
</head>
<body>

<button id="exportBtn">Export to Excel with Colors (ExcelJS)</button>

<script>
    const userProfile = {
        id: 1,
        name: "John Doe",
        email: "[email protected]",
        age: 30,
        isActive: true,
        preferences: {
            theme: "dark",
            notifications: {
                email: true,
                sms: false,
            },
        },
        createdAt: new Date().toISOString(),
    };

    async function exportToExcelWithExcelJS() {
        // Create a new workbook and worksheet
        const workbook = new ExcelJS.Workbook();
        const worksheet = workbook.addWorksheet('User Profile');

        // Add header row
        const headerRow = worksheet.addRow([
            "ID", "Name", "Email", "Age", "Is Active", "Theme", "Email Notifications", "SMS Notifications", "Created At"
        ]);

        // Apply style to header row
        headerRow.eachCell(cell => {
            cell.font = { bold: true };
            cell.fill = {
                type: 'pattern',
                pattern: 'solid',
                fgColor: { argb: 'FFFF00' } // Yellow background
            };
        });

        // Add data row
        const dataRow = worksheet.addRow([
            userProfile.id,
            userProfile.name,
            userProfile.email,
            userProfile.age,
            userProfile.isActive ? "Yes" : "No",
            userProfile.preferences.theme,
            userProfile.preferences.notifications.email ? "Yes" : "No",
            userProfile.preferences.notifications.sms ? "Yes" : "No",
            userProfile.createdAt
        ]);

        // Apply conditional style based on "Is Active" status
       ...