Googling/javascript

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

2021. 8. 1. 09:28
728x90
반응형

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

 

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

반응형
저작자표시 비영리 (새창열림)

'Googling > javascript' 카테고리의 다른 글

[Javascript] Body에서 Drag & Drop 활용하기  (0) 2021.05.12
[Javascript] 배열 (array) 자르기 - slice()  (0) 2021.05.12
'Googling/javascript' 카테고리의 다른 글
  • [Javascript] Body에서 Drag & Drop 활용하기
  • [Javascript] 배열 (array) 자르기 - slice()
날개단
날개단
이왕 하는거 우왕 나오게
날개단
날개단 기술 블로그
날개단
전체
오늘
어제
  • 분류 전체보기 (66)
    • Small Talk (2)
    • Retrospective (13)
    • Document (4)
    • Googling (1)
      • cs (7)
      • postgresql (8)
      • Vue + Nuxt (3)
      • javascript (3)
      • typescript (1)
      • Node.js (1)
      • Git (1)
      • JSP (1)
      • html + css (1)
      • Android (1)
      • tools (4)
    • Achieving (1)
      • ToyProject (1)
      • Study (0)
    • Deep Dive Series (12)
      • Paging (4)
      • Good Condition (5)
      • Image Resizing (2)
      • Algorithm (1)
    • Review (2)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 개발자회고
  • 좋은분기
  • nuxt
  • 포스트그레
  • PostgreSQL
  • 조건문
  • 페이징
  • if문
  • 토이프로젝트
  • 사이드프로젝트
  • 코드리팩토링
  • 신입개발자
  • EARLYRETURN
  • 좋은조건문
  • 스타트업회고
  • 상반기회고
  • 개발자
  • 스타트업개발자
  • 회고
  • 개발자변신

최근 댓글

최근 글

hELLO · Designed By 정상우.
날개단
[JavaScript] 오픈소스 활용 json 엑셀파일로 내보내기 (feat. SheetJs)
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.