NodeJS 이용한 엑셀 다운로드 및 차트 만들기

SpringBoot, NodeJS 코드로 Excel 파일을 생성하는 코드 이다. 여러 부분으로 나누어서 기록 후 보기위해 작성하였다. 상황에 따라 년, 월에 따라 엑셀을 자동으로 다운로드 받게 된다. 여기서는 NodeJs 단에 js 부분만 기록하였다.

1. 버튼 클릭 이벤트 핸들러 설정

$("#btnExcelDownSend").click(function(e){
    e.preventDefault();
    // ...
});

$("#btnExcelDownSend").click: id가 "btnExcelDownSend"인 요소가 클릭되었을 때의 이벤트를 처리합니다. e.preventDefault(): 클릭 이벤트의 기본 동작을 중단시킵니다. 이 경우에는 버튼 클릭에 따른 기본 동작(예: 폼 제출)을 방지합니다.

 

2. Ajax 요청

$.ajax({
    url: "/EXCEL",
    type: "POST",
    dataType: 'json',
    data: {
        _csrf: csrf,
        year: year,
        month: month
    },
    beforeSend:function(){
        $('.wrap-loading').removeClass('display-none');
    },
    complete:function(){
        $('.wrap-loading').addClass('display-none');
    },
})
.done(function(result){ 
    // ...
})
.fail(function(error){ 
    // ...
});

 

$.ajax(): Ajax 요청을 수행하는 jQuery 메서드입니다. 

url: 서버로 보낼 요청 주소 ("/GetStaticList"). 

type: HTTP 요청 메서드 (POST). 

dataType: 서버에서 받을 데이터의 타입을 지정 (JSON). 

data: 서버에 보낼 데이터 객체. 

beforeSend: Ajax 요청이 전송되기 전에 실행되는 함수. 

complete: Ajax 요청이 완료된 후에 실행되는 함수.

 

3. 서버 응답 데이터 처리

 .done(function(result){ 
 
var statisticsList = result.data;
console.log("statisticsList:",statisticsList);
var jsonArray = [];


if(result.code == "200") {
   var jsonObj = {};
  
   for (var i in statisticsList){
var storeTime = statisticsList[i].storeTime;
var totalSms = statisticsList[i].totalSms;
var succSms = statisticsList[i].succSms;
var failSms = statisticsList[i].failSms;

var jsonObj = {};

jsonObj["DAY"] = storeTime;

jsonObj["SMS 전체"] = totalSms;
jsonObj["SMS 성공"] = succSms;
jsonObj["SMS 실패"] = failSms;


jsonArray.push(jsonObj);
   }
   
   
   console.log("jsonArray : ",jsonArray);

   excelHandler = {
   getExcelFileName : function(){
 return '통계.xlsx';
   },
   getSheetName : function(){
 return 'Sheet1';
   },
   getExcelData : function(){
 return jsonArray;
   },
   getWorksheet : function(){
 return XLSX.utils.json_to_sheet(this.getExcelData());
   }
   }
 
   exportExcel();

}else{
  $.alert("엑셀 다운로드에 실패했습니다.", {title: '알림'});
}
 
 })
 .fail(function(error){ 
console.log(error);
$.alert("문자발송결과 조회에 실패했습니다.", {title: '알림'});
 });
 
 });

Ajax 요청이 성공했을 때 실행되는 부분입니다.

 result.code를 통해 서버 응답의 성공 여부를 확인하고, 성공 시에는 데이터를 가공하여 jsonArray에 저장합니다.

 

4. 엑셀 다운로드 함수

///////////////////////////////////////[엑셀다운로드]///////////////////////////////////////////////////
let excelHandler = null;

function s2ab(s) { 
    var buf = new ArrayBuffer(s.length); //convert s to arrayBuffer
    var view = new Uint8Array(buf);  //create uint8array as viewer
    for (var i=0; i<s.length; i++) view[i] = s.charCodeAt(i) & 0xFF; //convert to octet
    return buf;    
}

function exportExcel(){ 
    // step 1. workbook 생성
    var wb = XLSX.utils.book_new();

    // step 2. 시트 만들기 
    var newWorksheet = excelHandler.getWorksheet();
    
newWorksheet['!cols'] = [
{wpx:70},
{wpx:60},
{wpx:60},
{wpx:60},
];

    // step 3. workbook에 새로만든 워크시트에 이름을 주고 붙인다.  
    XLSX.utils.book_append_sheet(wb, newWorksheet, excelHandler.getSheetName());

    // step 4. 엑셀 파일 만들기 
    var wbout = XLSX.write(wb, {bookType:'xlsx',  type: 'binary'});

    // step 5. 엑셀 파일 내보내기 
    saveAs(new Blob([s2ab(wbout)],{type:"application/octet-stream"}), excelHandler.getExcelFileName());

console.log("EXCEL DOWNLOAD SUCCESS");
}

exportExcel 함수: 엑셀 파일을 생성하고 다운로드하는 역할을 하는 함수. 

XLSX.utils.book_new(): 새로운 워크북을 생성. 

XLSX.utils.book_append_sheet: 시트를 생성하여 워크북에 추가. 

XLSX.write: 워크북을 이진 형식으로 변환.

 Blob: 이진 데이터를 담을 수 있는 객체를 생성. 

saveAs: Blob을 사용하여 파일을 다운로드. 좋습니다. 코드를 더 자세하게 설명해보겠습니다. 1. 버튼 클릭 이벤트 핸들newWorksheet['!cols']: 엑셀 시트의 각 열의 너비를 설정하는 부분.

wpx: 픽셀 단위의 너비.

 

5.결과 화면

다른 스프링단이나 쿼리부분은 생략하고 내가 참고하기 위해 정리한 내용입니다.