I’ve created a JavaScript code that is supposed to retrieve data from a Spring Controller and download the data in the format of an Excel file. The data retrieval part is working fine, and I’m able to apply width and height to the cells as well. However, aligning or any other styling of the text inside the cells is problematic.

javascript
Copy code

function s2ab(s) {
                    var buf = new ArrayBuffer(s.length);
                    var view = new Uint8Array(buf);
                    for (var i = 0; i < s.length; i++)
                        view[i] = s.charCodeAt(i) & 0xFF;
                    return buf;
                }
                
                function xmlDownload() {
                    if ($("#searchStts").val() === 'off') {
                        alert("No data found for the search criteria.");
                    } else {
                        var year = $("#xmlYear").val();
                        var mjrSector = $("#xmlMjrSector").val();
                        var mnrSector = $("#xmlMnrSector").val();
                        var type = $("#xmlType").val();
                        var dist = $("#xmlDist").val();
                        var selectedTypeText = $('#selectedTypeText').val(); 
                
                        var now = new Date();
                        var currentYear = now.getFullYear();
                        var currentMonth = (now.getMonth() + 1).toString().padStart(2, '0');
                        var currentDay = now.getDate().toString().padStart(2, '0');
                        var currentHour = now.getHours().toString().padStart(2, '0');
                        var currentMinute = now.getMinutes().toString().padStart(2, '0');
                        var currentSecond = now.getSeconds().toString().padStart(2, '0');
                        var currentDateTime = '_' + currentYear + currentMonth + currentDay + '_' + currentHour + currentMinute + currentSecond;
                
                        $.ajax({
                            url: "/data/cmmrcDist/xmlDown",
                            data: { year: year, mjrSector: mjrSector, mnrSector: mnrSector, type: type, dist: dist },
                            type: "GET",
                            dataType: "json",
                            success: function(response) {
                                var wb = XLSX.utils.book_new();
                                var wsData;
                                wb.SheetNames.push("sheet 1");
                                wsData = response.xmlList;
                                wsData.unshift(["", "", "Group", "Detail", "Total", "Normal Operation", "Closed", "Shutdown", "Others", year + " New Openings", "Average Rent (Unit: Thousand Won)", "Opening Rate (%)", "Closure Rate (%)", "3-Year Survival Rate (%)", "Average Business Period"]);
                                wsData.unshift(["Year", selectedTypeText, "Sector", "", "Number of Establishments", "", "", "", "", "Business Status"]);
                
                                var ws = XLSX.utils.aoa_to_sheet(wsData);
                                var style = { alignment: { horizontal: "center" } };
                
                                var range = XLSX.utils.decode_range(ws['!ref']);
                
                                for (var rowNum = range.s.r; rowNum <= range.e.r; rowNum++) {
                                    for (var colNum = range.s.c; colNum <= range.e.c; colNum++) {
                                        var cellAddress = { r: rowNum, c: colNum };
                                        var cellRef = XLSX.utils.encode_cell(cellAddress);
                                        var cell = ws[cellRef];
                                        if (cell && cell.t === 's') {
                                            cell.s = style;
                                        }
                                    }
                                }
                
                                wb.Sheets["sheet 1"] = ws;
                
                                ws["!merges"] = [
                                    { s: { r: 0, c: 0 }, e: { r: 1, c: 0 } },
                                    { s: { r: 0, c: 1 }, e: { r: 1, c: 1 } },
                                    { s: { r: 0, c: 2 }, e: { r: 0, c: 3 } },
                                    { s: { r: 0, c: 4 }, e: { r: 0, c: 8 } },
                                    { s: { r: 0, c: 9 }, e: { r: 0, c: 14 } }
                                ];
                
                                ws['!cols'] = [{ width: 15 }, { width: 15 }, { width: 15 }, { width: 15 }, { width: 15 }, { width: 15 }, { width: 15 }, { width: 15 }, { width: 15 }, { width: 15 }, { width: 15 }, { width: 15 }, { width: 15 }, { width: 15 }, { width: 15 }, { width: 15 }];
                                ws['!rows'] = [{ hpx: 30 }, { hpx: 30 }];
                
                                var wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' });
                                console.log("wb::", wb);
                                saveAs(new Blob([s2ab(wbout)], { type: "application/octet-stream" }), 'BusinessStatus' + currentDateTime + '.xlsx');
                            },
                            error: function(xhr, status, error) {
                                console.error("Failed to retrieve data", error);
                            }
                        });
                    }
                }

I’ve checked the console log of wb before XLSX.write, and it contained the styles, but for some reason, after console logging var wbout, there were no styles for alignment.

What could be the issue here, and how can I ensure that the text inside the cells is properly aligned when downloading the Excel file?