[JavaScript] 오픈소스 활용 json 엑셀파일로 내보내기 (feat. SheetJs)

 협업툴 서비스를 개발하면서, 업무 목록을 엑셀로 내려받을 수 없냐는 문의도 많았고, 어드민에서 각종 통계 데이터들을 수시로 엑셀로 내려받고 싶다는 니즈가 있었다. 서버 단에서 엑셀을 내려주는 모듈 같은게 있긴 했는데 쓰기가 매우 어렵고 뷰 화면을 따로 그려서 다운 받는 방식이라 간단하다고 느껴지지 않았다. 분명, json 데이터를 간단하게 excel로 다운받을 수 있는 오픈소스가 있을거라고 생각했다.

찾아보니 SheetJS라는 오픈소스는 엑셀과 관련한 엄청나게 많은 기능을 가진 javascript 오픈소스가 있었다. 하지만, json을 엑셀로 손쉽게 내려받을 수 있는 방법을 찾지 못했다. (2019년 상반기쯤 찾아봤을때 기준) 그래서 안에 있는 기능들을 활용하여 우리 팀이 쓰기 좋게 함수를 하나 만들어야겠다고 생각이 들었다.

[
	{
		"name":"john",
		"age":"22"
	}, {
		"name":"steve",
		"age":"25"
	}, {
		"name":"adel",
		"age":"16"
	}
]

 보통 DB에서 쿼리를 통해 얻을 수 있는 데이터들을 바로 연결하쳐 엑셀로 내려받는 경우가 많다. 그리고 데이터 대부분은 JsonArray 형태를 가지기에 이러한 데이터 형태에서만 엑셀을 내려받을 수 있게 연구했다.

 결과적으로 손쉽게 엑셀 내려받을 수 있는 함수가 태어났다. 그 함수의 일부를 공유한다.

/**
 * @param title {string} - 엑셀제목
 * @param dataJsonArray {Array.<Object>}- jsonArray 데이터
 * @param orderedColumnArray {Array.<{NAME:string, CODE:string}>} - 재정렬한 COLUMN CODE & NAME
 */
function downloadExcel(title, dataJsonArray, orderedColumnArray) {

    var columnCodeArray = [];
    var columnNameArray = [];
    orderedColumnArray.forEach(function (orderedColumn) {
        columnCodeArray.push(orderedColumn.CODE);
        columnNameArray.push(orderedColumn.NAME);
    });

    var wb = XLSX.utils.book_new();
    var arrJSON = JSON.parse(JSON.stringify(dataJsonArray));
    var dataJsonKeyLength = dataJsonArray.length > 0 && Object.keys(dataJsonArray[0]).length;
    var returnColumnCount = columnNameArray.length;

    //열순서 및 시트화
    var ws = XLSX.utils.json_to_sheet(arrJSON, {header: columnCodeArray});

    //엑셀파일정보
    wb.Props = {
        Title: title,
        Subject: "Excel",
        Author: "Master",
        CreatedDate: new Date()
    };
    //엑셀 첫번째 시트네임
    wb.SheetNames.push(title);

    //열이름변경
    changeColName(ws, columnNameArray);

    //필요없는 열 삭제
    if (dataJsonKeyLength - returnColumnCount > 0) {
        delete_cols(ws, returnColumnCount + 1, dataJsonKeyLength - returnColumnCount);
    }

    //시트에 데이터를 연결
    wb.Sheets[title] = ws;

    //다운로드
    saveAs(new Blob([
        s2ab(XLSX.write(wb, {
            bookType: 'xlsx',
            type: 'binary'
        }))
    ], {
        type: "application/octet-stream"
    }), title + '.xlsx');

}

 인풋값으로 엑셀제목, JsonArray, 그리고 Json의 key 값들의 순서 재정렬과 코드가 아닌 한글로 네이밍 처리를 해야하기 때문에 orderedColumnArray가 추가로 필요하다. 

참고로, 해당 소스가 실제 실행이 되기 위해서는 두 개의 라이브러리가 필요하다.
https://cdnjs.cloudflare.com/ajax/libs/xslx/0.7.12/xlsx.core.min.js by https://github.com/SheetJS/sheetjs
http://cdn.jsdelivr.net/g/filesaver.js by https://github.com/eligrey/FileSaver.js

 

 개발 시작한지 얼마 안 되었을 쯔음에 스스로 연구하여 팀원들에게 선보였던 기능이라 되게 뿌듯했다.
지금도 엑셀 내려받기는 이 함수를 활용하여 손쉽게 붙여넣고 있다!!!