엑셀 다운로드 기능 구현하기

화면에 나와있는 테이블을 엑셀로 다운로드 받아서 사용하고 싶은 경험이 있으셨을텐데요.

JavaScript로 엑셀 다운로드 기능을 구현해봅시다!

1. SheetJS 라이브러리 사용

가장 먼저 코드를 작성하기 전에 SheetJS를 설치해 줍시다.(저는 npm을 사용해서 설치해 주었어요.)

SheetJS : JavaScript에서 엑셀 파일을 생성하고 다운로드할 수 있는 라이브러리

npm install xlsx

※ 만약, 스크립트로 라이브러리를 추가하고 싶다면, 다음과 같이 입력해 줍니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js"></script>

2. 코드 작성하기

그러면 이제 html에서 코드를 작성해 봅시다!

body 부분에 다운로드 버튼을 만들어 주세요.

<button id="download">엑셀 다운로드</button>

그 다음, <script>태그를 만들어서 그 안에 다음과 같이 입력해주세요.

document.getElementById('download').addEventListener('click', function() {
	// 데이터 준비
    const data = [
    	{ name: "Lee", age: 30 },
    	{ name: "Kim", age: 25 }
    ];

    // 엑셀 생성
    const ws = XLSX.utils.json_to_sheet(data);
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, "sheet1");

    // 파일 다운로드
    XLSX.writeFile(wb, "엑셀데이터.xlsx");
})

3. 결과

그러면 다음과 같이 나타나게 됩니다!

See the Pen Tistory_Front-End Study_JavaScript_엑셀 다운로드 기능 구현하기_2. 코드 작성하기 by NewBean0312 (@newbean0312) on CodePen.

엑셀 파일이 다운로드되고 데이터도 정상적으로 나타나는 것을 확인할 수 있어요.

전체 코드

excel_download.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>엑셀 다운로드</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js"></script>
</head>
<body>
    <button id="download">엑셀 다운로드</button>

    <script>
        document.getElementById('download').addEventListener('click', function() {
            // 데이터 준비
            const data = [
                { name: "Lee", age: 30 },
                { name: "Kim", age: 25 }
            ];

            // 엑셀 생성
            const ws = XLSX.utils.json_to_sheet(data);
            const wb = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(wb, ws, "sheet1");

            // 파일 다운로드
            XLSX.writeFile(wb, "엑셀데이터.xlsx");
        })
    </script>
</body>
</html>

4. 정리하며

지금까지 엑셀 다운로드 기능에 대해 알아보았습니다.

이를 활용하여, 사용자가 데이터를 다운받을 수 있게 기능을 구현할 수 있을 것 같아요.

'Front-End Study > JavaScript' 카테고리의 다른 글

함수 선언문(Function Declaration)과 함수 표현식(Function Expression) (1)	2024.10.22
구조 분해 할당(Destructuring assignment) (0)	2024.10.18
즉시 실행 함수(IIFE) (0)	2024.09.19
D3 (0)	2024.08.14
웹팩(Webpack)이란? (0)	2024.06.29