https://github.com/gyeongseokkang/exportexcel_javascript
Simple implement for Export to Excel in Javascript
https://github.com/gyeongseokkang/exportexcel_javascript
export-to-excel html2canvas plotlyjs
Last synced: 7 months ago
JSON representation
Simple implement for Export to Excel in Javascript
- Host: GitHub
- URL: https://github.com/gyeongseokkang/exportexcel_javascript
- Owner: gyeongseokKang
- Created: 2021-03-09T09:14:00.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2021-03-16T16:09:50.000Z (almost 5 years ago)
- Last Synced: 2025-03-04T17:41:47.558Z (12 months ago)
- Topics: export-to-excel, html2canvas, plotlyjs
- Language: JavaScript
- Homepage:
- Size: 1.26 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# exportExcel_javascript
* 기능 목표 : 대시보드에 있는 차트와 테이블을 Excel 파일로 떨궈주세요.
* 세부 목표 : 차트와 테이블은 이미지로 넣되, 테이블의 경우 전체 데이터를 보여주세요
* 구현 : 목표를 달성하기 위한 기본 테스트 레포.
* 설명글 : https://all-dev-kang.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-image-data%EB%A5%BC-Excel%EB%A1%9C-%EB%82%B4%EB%B3%B4%EB%82%B4%EA%B8%B0-featexceljs
## 전체 로직
1. querySelectorAll로 차트가 그려진 div 찾기
2. html2canvas 라이브러리를 이용하여 이미지로 뽑아오기
3. 테이블에 입력할 데이터 넣기
4. buffer로 보내 Blob 파일 형식으로 만들어서 다운로드하기
## 사용 라이브러리
* exceljs - 자바스크립트에서 excel export가 가능하도록 해주는 라이브러리, export 뿐만 아니라 다른 기능들도 많음.
* html2canvas - html의 특정 영역을 canvas로 그려주는 라이브러리, excel에는 일반 img 태그가 달린 파일을 넣을 수 없어서 변환이 필요.
* plotlyjs - 데이터 시각화를 위한 라이브러리, 사용할수록 매력적인 시각화 라이브러리로, 다양한 차트, 다양한 언어, 다양한 프레임워크를 지원.
## 사용방법
1. git clone 후 open live server로 확인(VSC 추천)
2. Download xlsx 버튼 클릭
3. excel 파일 확인
## 결과
### live server
### export excel file
