HTML 데이터 표를 라이브러리 없이 javascript를 통해 엑셀로 내보내기

개발을 하다보면 HTML테이블 데이터를 엑셀로 내보내야 하는 일이 종종 있을 수 있습니다. 엑셀 추출은 많은 라이브러리가 존재하지만, 라이브러리 없이 HTML 데이터 표를 엑셀로 만들 수 있는 방법이 있습니다.

(핑프들, 귀찮으신분들 강추)

 

아래는 기본 예제입니다.

See the Pen Untitled by sodium casein (@xyyhsawg-the-selector) on CodePen.

 

위의 예제는 스타일 없이 단순히 데이터만 추출합니다.

아래 소스를 통해 활용할 수 있습니다.

 

See the Pen 라이브러리X 활용 by sodium casein (@xyyhsawg-the-selector) on CodePen.

코드 설명 

1. document.getElementById("example-table").outerHTML을 통해서 HTML 데이터들을 가져옵니다.

2. HTML 문서 구조를 추가하고, HTML과 HEAD, STYLE태그들을 포함해 스타일을 제대로 인식할 수 있게 합니다.

3. data:application/vnd.ms-excel;charset=utf-8,을 사용하여 브라우저가 데이터를 엑셀 파일로 인식하게 만듭니다.

4. <a>태그로 DOWNLOAD속성을 통해 파일을 다운로드합니다.

 

주의 사항

• 실제 excel 파일이 아닌 html기반의 xls파일이므로, 복잡한 엑셀 기능은 지원하지 않습니다.
• 최신 브라우저는 문제없지만, 오래된 브라우저에서는 지원하지 않을 수 있습니다.