Using JavaScript Excel file Header is not highlighted

I have code for two table I export both table in excel file its working fine but i want to show table header highlighted like Yellow or green color but its not working. I do not understand what is the issue.

please see the output image

enter image description here

but I want to this type of output like header highlighted

enter image description here

<!DOCTYPE html>
<html>
<head>
    <title>Export Tables to Excel</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.2/xlsx.full.min.js"></script>
</head>
<body>
    <div class="first-report">
        <h4>AVP Report</h4>
        <table id="AVPTable">
            <thead id="AVPHeaderName">
                <tr>
                    <th>Header 1</th>
                    <th>Header 2</th>
                </tr>
            </thead>
            <tbody id="masterTableBody">
                <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="second-report">
        <h4>DO Red roll-off Graph</h4>
        <table id="DORedTable">
            <thead id="DORedProjectHeader">
                <tr>
                    <th>Header A</th>
                    <th>Header B</th>
                </tr>
            </thead>
            <tbody id="DORedProjectBody">
                <tr>
                    <td>Data A</td>
                    <td>Data B</td>
                </tr>
            </tbody>
        </table>
    </div>

    <button type="submit" id="excelAVPDOBtn" onclick="DownloadRYProjectReport();" class="btn btn-submit btn-clear-get-all">Export to Excel</button>

    <script>
        function DownloadRYProjectReport() {
            var avpTable = document.getElementById('AVPTable');
            var doRedTable = document.getElementById('DORedTable');

            if (!avpTable || !doRedTable) {
                alert('One or both tables are missing!');
                return;
            }

            var wb = XLSX.utils.book_new();

            var ws1 = XLSX.utils.table_to_sheet(avpTable);
            XLSX.utils.book_append_sheet(wb, ws1, "AVP Report");

            XLSX.utils.sheet_add_aoa(ws1, [[''], ['']], {origin: -1});

            var ws2 = XLSX.utils.table_to_sheet(doRedTable);
            XLSX.utils.sheet_add_json(ws1, XLSX.utils.sheet_to_json(ws2, {header: 1}), {skipHeader: true, origin: -1});

            var range1 = XLSX.utils.decode_range(ws1['!ref']);
            for (var C = range1.s.c; C <= range1.e.c; ++C) {
                var cell = ws1[XLSX.utils.encode_cell({r: 0, c: C})];
                if (cell) {
                    if (!cell.s) cell.s = {};
                    cell.s.fill = {fgColor: {rgb: "FFFF00"}};
                }
            }

            var range2 = XLSX.utils.decode_range(ws2['!ref']);
            for (var C = range2.s.c; C <= range2.e.c; ++C) {
                var cell = ws1[XLSX.utils.encode_cell({r: range1.e.r + 3, c: C})]; 
                if (cell) {
                    if (!cell.s) cell.s = {};
                    cell.s.fill = {fgColor: {rgb: "FFFF00"}};
                }
            }

            XLSX.writeFile(wb, 'Report.xlsx');
        }
    </script>
</body>
</html>

Here is my code both table export is working but header highlight is not working.
if anyone know how to fix this give a valuable response.
Thank you in advance.