블로그 목적

SheetJS 이용한 HTML의 table을 쉽게 엑셀파일로 다운로드 하는 기능에 대해서 공부및 정리후 나만의 노하우와 지식을 공유한다.

블로그 요약

1. SheetJS 에 대해서 알아본다.

2. SheetJS 의 XLSX.utils 예제를 알아본다.

블로그 상세내용

우선, SheetJS에 대해서 알아볼까요?

SheetJS 는 구글에서 아래와 같이 검색하시면 해당 홈페이지를 찾으실 수 있고요..

그럼, 한번 조심스럽게 SheetJS URL을 클릭해볼까요?

(개인적으로 첫만남이 쫌 설레이시죠?  저는 현재 진행하는 프로젝트의 기능 추가 요건이라서 첫만남을 급만남(?)으로 했네요 ㅋㅋ)

클릭하시면 아래와 같이 SheetJS 의 민낯(?)을 확인하실 수 있습니다.

간단하게 SheetJS 을 소개하자면요..

스프레드시트 단순화하는 도구이고요, 스프레드시트 읽기, 편집 및 내보내기 웹 브라우저 및 서버에서 작동한다고 보시면 되는데요..

그냥 한마디로 설명드리자면...

Javascript로 클라이언트에서 엑셀 다운로드를 구현하는데 이때 사용하는 라이브러리가 SheetJS 라고 머릿속에 넣어두시면 될것 같습니다. 

참고로, SheetJS로 배열, json, html(table) 형태 등 다양한 형태의 데이터로 엑셀 파일을 다운로드 시켜줄 수 있습니다.

이번블로그에서는 그중에 저는 html(table) 을 엑셀로 바로 다운로드 받을 수 있도록 실습해보도록 할께요~

참고로, 해당 홈페이지에서는 위의 요구사항을 샘플 페이지로 설명하고 있었는데요..

우선, 아래 Demos 를 클릭하시면 되고요..

아래 Export Spreadsheets 를 클릭하시면 됩니다. (쉽죠??)

그럼 아래와 같이 샘플 예제가 나오고요..

아래 HTML table 을 해당 버튼 "Export to XLSX!" 을 클릭하시면 바로 엑셀로 다운로드 받으실 수 있습니다. 

위의 페이지에서 "소스보기" 를 하면 적나라하게(?) 소스코드를 확인할 수 있고요..

"Export to XLSX!" 버튼은 아래와 같이 구성되어 있었고요..

버튼 클릭시 doit('xlsx') 함수를 호출하고 있었네요..

위의 과정을 통해서 버튼을 누르게 되면 아래와 같이 엑셀파일이 생성됩니다.

엑셀파일을 열어보면...HTML table 내용이 바로 나만의 엑셀파일에 담기게 되고요..

혹시나, 누군가 저에게 HTML table 의 내용을 바로 엑셀파일로 만들어주세요!! 라고 하신다면...

저는 바로 해당 SheetJS 을 사용해서 바로 코딩해 드리는 마술(?)을 직접 보여드리는 능력을 얻게 된거죠?? 정말로 감사합니다!!**

여기까지가 제가 SheetJS 을 공부하면서 얻은 코딩 마술(?)이였고요

그럼, 배운것은 바로 응용해 봐야 겠죠??

(개발의 삶이란 뭐 그런거죠 ㅎㅎ 개발자의 숙명이죠 뭐!! 그런것이죠..ㅎㅎ)

우선, 위에서 알아본SheetJS관련 내용을 바로 응용해 볼까요?

다행히도 제가 맡고 있는 프로젝트에서는 운용자분들께서 엑셀을 좋아하셔서, 바로 코딩해 드릴 수 있었습니다.

요구사항이 "현재 웹페이지의 HTML table 내용을 엑셀로 다운로드 받게 해주세요~!!" 였는데요 

(뉍!! 하고 바로 구현해버렸습니다.)

구현내용을 잠시설명드리자면 ..

우선, 아래 script 를 추가해 주셔야 하고요...

 - /js/xlsx.full.min.js

그리고, 버튼을 bootstrap 을 사용해서 이쁘게 만듭니다.

그리고, 버튼을 클릭하면 동작을 해야 겠죠? 

아래와 같이 구현하면 됩니다. 클릭하면 "excelDownloadByHtml()" 함수를 호출하도록요..

마지막으로, HTML table 을 엑셀로 만들어주는 코드를 넣어주면 끝!!

위와 같이 코딩을 끝내면, 버튼 클릭시 아래와 같이 엑셀로 다운로드 됨을 확인할 수 있습니다.

오늘의 블로그는 여기까지고요

항상 믿고 봐주셔서 감사합니다.

그럼 결론을 정리해보고, 블로그를 마치도록 할께요..

결론

하나, SheetJS는 그냥 한마디로 설명드리자면...

Javascript로 클라이언트에서 엑셀 다운로드를 구현하는데 이때 사용하는 라이브러리가 SheetJS 라고 머릿속에 넣어두시면 될것 같습니다. 

참고로, SheetJS로 배열, json, html(table) 형태 등 다양한 형태의 데이터로 엑셀 파일을 다운로드 시켜줄 수 있습니다.

둘, "소스보기"로 웹페이지 소스를 적나라하게(?) 살펴본후 바로 응용하시면됩니다. 

셋, 항상 개발자는 머리로만 지식을 알게되면, 까먹는 일이 너무나 많은데요...어제 코딩한 소스를 보고도....

내가 짯나? 헐~~ 이러면서요...

그래서 자주자주 리마인드하기위해서 실습코딩을 해줘야 하죠~!!

오늘하루도 기쁘고 행복한 하루되세요~!!

나의 목표 및 다짐을 항상 내곁에 두기

• 목표

  • 나의 강점을 바탕으로 나의 일을 잘해냄으로써 타인과 사회를 아릅답게 만든다.

  • 현재 내가 가진 능력으로 누군가에 도움이 될 수 있을까? 에 대해서 항상 생각하기

  • 나는 블로그 생태계에서 IT 테크관련 파워블로거가 반드시 된다!

  • 유튜브 시장(?)을 호령하는 100만 유튜버가 반드시 된다!! (feat. 100만 유튜버가 반드시 될 매직!!)

  • 나는 꾸준히 공부하고 공부한것을 실천하는 창의적인 개발자가 된다.! (feat. devocean 개발&운영자가될 매직!!)

• 목표를 이루기 위한 실천방안

  • 꾸준한 블로깅/기록법/독서법으로 넘버원이 아닌 온리원이 되보자.

  • 천사불여일행(千思不如一行)을 항상생각하며 체화 및 각인시키자.

    • "천번 생각하는것보다 한번 행동하는 것이 더 중요하다."

  • 기기일약 불능십보(騏驥一躍 不能十步) / 노마십가 공재불사(駑馬十駕 功在不舍)

    • 천리마도 한번에 열걸음을 뛸 수 없고, 느리고 둔한말이라도 열흘이면 하룻길을 간다.

  • 모든 실수에는 마술이 숨어 있다. 따라서 나는 실수하면 실수할수록, 그런 실수에서 더 많이 배울수록 삶에서 더 많은 마술을 갖는다.