[js] 데이터 엑셀로 내려받기

먼저 FileSaver, xlsx.full 라이브러리 다운로드

<script src="~/js/FileSaver.min.js" asp-append-version="true"></script>
<script src="~/js/xlsx.full.min.js" asp-append-version="true"></script>


// 엑셀 다운로드 버튼 클릭 이벤트
// 컬럼 이름과 필드를 지정합니다.
var columns = [
    { field: 'commGrp', title: '그룹' },
    { field: 'commCd', title: '코드' },
    { field: 'commNm', title: '코드명' },
    { field: 'commRmk', title: '비고' },
    { field: 'useYN', title: '사용여부' },
    { field: 'regDtm', title: '등록일시' },
    { field: 'regUsr', title: '등록자' },
    { field: 'uptDtm', title: '갱신일시' },
    { field: 'uptUsr', title: '갱신자' }
];

fetch(url, {
    method: 'POST',
    body: formData
})
    .then(response => response.json())
    .then(data => {
        // 엑셀 내보내기 함수 호출
        exportAllDataToExcel(data.data, title, columns); 
    })
    .catch(error => console.error('Error:', error));



// Excel Download
function exportAllDataToExcel(data, title, columns) {
    var currentDateTime = getCurrentDateTime().replace(/[ :\-]/g, ''); 
    var filename = title + "_" + currentDateTime + ".xlsx";

    if (data && Array.isArray(data)) {
        // 지정된 컬럼들만 포함하도록 데이터를 필터링합니다.
        var filteredData = data.map(item => {
            var filteredItem = {};
            columns.forEach(col => {
                if (item.hasOwnProperty(col.field)) {
                    filteredItem[col.field] = item[col.field];
                }
            });
            return filteredItem;
        });

        // 엑셀 헤더 설정
        var header = {};
        columns.forEach(col => {
            header[col.field] = col.title;
        });
        filteredData.unshift(header); // 헤더를 데이터의 첫 번째 행에 추가

        var ws = XLSX.utils.json_to_sheet(filteredData, { skipHeader: true });
        var wb = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(wb, ws, "Sheet1");

        // 워크북을 바이너리 형식으로 작성합니다.
        var wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' });

        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;
        }

        // 생성된 바이너리 데이터를 사용하여 파일을 다운로드합니다.
        saveAs(new Blob([s2ab(wbout)], { type: "application/octet-stream" }), filename);
    } else {
        console.error('서버에서 반환된 데이터가 배열 형식이 아닙니다.');
    }
}

 

결과