[Javascript] html javascript 로 엑셀 다운로드 구현. 총정리

Develop

[Javascript] html javascript 로 엑셀 다운로드 구현. 총정리

issuemaker99 2025. 2. 21. 14:39

728x90

JavaScript와 jQuery를 사용하여 HTML 파일을 Excel로 다운로드하는 방법에는 여러 가지가 있지만, 일반적으로 SheetJS (xlsx) 라이브러리를 활용하는 것이 가장 간편합니다.

✅ 방법: SheetJS 사용

SheetJS (xlsx) 라이브러리를 사용하면 HTML 테이블을 쉽게 엑셀 파일로 변환할 수 있습니다.

1. HTML 테이블 준비

먼저 HTML에서 다운로드할 데이터를 테이블로 준비합니다.

<table id="myTable">
    <tr>
        <th>이름</th>
        <th>나이</th>
        <th>직업</th>
    </tr>
    <tr>
        <td>홍길동</td>
        <td>30</td>
        <td>개발자</td>
    </tr>
    <tr>
        <td>이순신</td>
        <td>45</td>
        <td>장군</td>
    </tr>
</table>

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

2. JavaScript 코드 (SheetJS 사용)

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
<script>
document.getElementById("downloadExcel").addEventListener("click", function () {
    // 1. HTML 테이블 가져오기
    let table = document.getElementById("myTable");

    // 2. SheetJS를 이용해 워크시트로 변환
    let workbook = XLSX.utils.table_to_book(table, { sheet: "Sheet1" });

    // 3. 엑셀 파일 저장
    XLSX.writeFile(workbook, "table.xlsx");
});
</script>

설명

XLSX.utils.table_to_book(table, { sheet: "Sheet1" })
→ HTML 테이블을 엑셀 형식으로 변환합니다.
XLSX.writeFile(workbook, "table.xlsx")
→ 사용자가 파일을 다운로드할 수 있도록 자동으로 저장합니다.

추가: JSON 데이터를 엑셀로 다운로드

만약 JSON 데이터를 엑셀로 저장하고 싶다면 아래와 같이 변경할 수 있습니다.

<button id="jsonDownload">JSON 데이터를 엑셀로 저장</button>

<script>
document.getElementById("jsonDownload").addEventListener("click", function () {
    let jsonData = [
        { 이름: "홍길동", 나이: 30, 직업: "개발자" },
        { 이름: "이순신", 나이: 45, 직업: "장군" }
    ];

    let worksheet = XLSX.utils.json_to_sheet(jsonData);
    let workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet, "데이터");

    XLSX.writeFile(workbook, "data.xlsx");
});
</script>

✅ 방법: HTML을 Blob으로 변환 후 다운로드

HTML 태그 자체를 엑셀로 다운로드하고, 테이블에 적용된 CSS도 유지하려면 MS Excel이 HTML을 지원하는 기능을 활용해야 합니다.

Excel은 .xls 확장자로 저장된 HTML 파일을 인식할 수 있으므로, HTML 내용을 그대로 엑셀 형식으로 저장하면 CSS도 유지할 수 있습니다.

아래 방법을 사용하면 HTML 태그 + CSS 스타일 그대로 엑셀(.xls)로 다운로드할 수 있습니다.

1. HTML 코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML을 엑셀 다운로드</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: lightgray;
        }
    </style>
</head>
<body>

    <table id="myTable">
        <tr>
            <th>이름</th>
            <th>나이</th>
            <th>직업</th>
        </tr>
        <tr>
            <td>홍길동</td>
            <td>30</td>
            <td>개발자</td>
        </tr>
        <tr>
            <td>이순신</td>
            <td>45</td>
            <td>장군</td>
        </tr>
    </table>

    <button onclick="downloadExcel()">엑셀 다운로드</button>

    <script>
        function downloadExcel() {
            // 1. HTML 태그 가져오기
            let tableHTML = document.getElementById("myTable").outerHTML;

            // 2. 스타일 포함
            let css = "<style>" + document.querySelector("style").innerHTML + "</style>";

            // 3. 전체 HTML 구성
            let fullHTML = `
                <html>
                <head>
                    <meta charset="UTF-8">
                    ${css}
                </head>
                <body>
                    ${tableHTML}
                </body>
                </html>
            `;

            // 4. Blob을 생성하여 다운로드 (Excel에서 HTML을 인식할 수 있도록 .xls 확장자 사용)
            let blob = new Blob([fullHTML], { type: "application/vnd.ms-excel" });
            let a = document.createElement("a");
            a.href = URL.createObjectURL(blob);
            a.download = "table.xls";  // .xls 확장자로 저장
            a.click();
        }
    </script>

</body>
</html>

✅ 설명

document.getElementById("myTable").outerHTML
→ 테이블의 HTML을 가져옵니다.
document.querySelector("style").innerHTML
→ <style> 태그의 CSS를 가져와서 엑셀에도 적용합니다.
전체 HTML을 Blob으로 변환하여 .xls 확장자로 다운로드
→ Excel은 .xls 파일 내 HTML을 자동으로 읽고, 스타일도 반영합니다.

✅ 결과

다운로드된 table.xls 파일을 열면 HTML 태그 + CSS 스타일이 적용된 상태로 엑셀에서 열립니다.
border, background-color, text-align 등의 스타일도 유지됩니다.

✅ 방법: SheetJS를 사용하여 .xlsx 다운로드 + CSS 스타일 적용

아래 코드에서는 테이블 데이터를 추출하고, 배경색, 테두리, 정렬 등 기본적인 스타일을 적용하여 .xlsx 형식으로 저장합니다.

1. HTML 코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML을 엑셀 다운로드</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: center;
        }
        th {
            background-color: lightgray;
            font-weight: bold;
        }
    </style>
</head>
<body>

    <table id="myTable">
        <tr>
            <th>이름</th>
            <th>나이</th>
            <th>직업</th>
        </tr>
        <tr>
            <td>홍길동</td>
            <td>30</td>
            <td>개발자</td>
        </tr>
        <tr>
            <td>이순신</td>
            <td>45</td>
            <td>장군</td>
        </tr>
    </table>

    <button onclick="downloadExcel()">엑셀 다운로드</button>

    <script>
        function downloadExcel() {
            // 1. HTML 테이블을 JavaScript 배열로 변환
            let table = document.getElementById("myTable");
            let worksheet = XLSX.utils.table_to_sheet(table);

            // 2. 스타일 적용 (배경색, 정렬, 테두리)
            const range = XLSX.utils.decode_range(worksheet["!ref"]);
            for (let row = range.s.r; row <= range.e.r; row++) {
                for (let col = range.s.c; col <= range.e.c; col++) {
                    let cellAddress = XLSX.utils.encode_cell({ r: row, c: col });
                    if (!worksheet[cellAddress]) continue; // 셀이 없으면 건너뜀

                    // 셀 스타일 적용
                    worksheet[cellAddress].s = {
                        font: { bold: row === 0 }, // 첫 번째 행 (헤더) 굵게
                        fill: row === 0 ? { fgColor: { rgb: "D3D3D3" } } : {}, // 헤더 배경색
                        border: {
                            top: { style: "thin", color: { auto: 1 } },
                            left: { style: "thin", color: { auto: 1 } },
                            bottom: { style: "thin", color: { auto: 1 } },
                            right: { style: "thin", color: { auto: 1 } },
                        },
                        alignment: { horizontal: "center", vertical: "center" }, // 중앙 정렬
                    };
                }
            }

            // 3. 워크북 생성 후 엑셀 다운로드
            let workbook = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
            XLSX.writeFile(workbook, "table.xlsx");
        }
    </script>

</body>
</html>

✅ 설명

HTML 테이블을 SheetJS를 사용해 변환
- XLSX.utils.table_to_sheet(table)을 사용하여 HTML 테이블을 Excel 시트로 변환합니다.
스타일 적용
- 헤더(th) 부분을 굵게 (bold), 배경색 회색 (#D3D3D3), 가운데 정렬 적용.
- 모든 셀에 테두리 (thin border) 적용.
- alignment: { horizontal: "center", vertical: "center" } → 정렬 설정.
Excel 파일로 다운로드
- XLSX.writeFile(workbook, "table.xlsx")을 호출하여 .xlsx 파일로 다운로드.

✅ 결과

다운로드된 table.xlsx 파일을 열면, HTML 테이블의 데이터와 CSS 스타일이 적용된 상태로 엑셀에 표시됩니다.
기본적인 배경색, 정렬, 테두리가 유지됩니다.

✅ HTML을 Blob으로 변환하여 다운로드하면서 여러 개의 시트를 추가하는 방법

.xls 확장자로 저장하는 방법(HTML을 그대로 Excel에 전달하는 방식)에서는 여러 개의 시트를 추가하는 기능이 지원되지 않습니다.
그러나 .xlsx 파일을 사용하면 여러 개의 시트를 추가할 수 있습니다. 이를 위해 SheetJS (xlsx) 라이브러리를 활용하면 됩니다.

✅ 방법: SheetJS를 사용하여 여러 개의 시트 추가

아래 코드에서는 HTML 테이블 2개를 가져와서 각각의 데이터를 엑셀의 개별 시트로 저장합니다.

1. HTML 코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML을 엑셀로 다운로드 (여러 시트)</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: center;
        }
        th {
            background-color: lightgray;
            font-weight: bold;
        }
    </style>
</head>
<body>

    <h3>📌 직원 목록</h3>
    <table id="table1">
        <tr>
            <th>이름</th>
            <th>나이</th>
            <th>부서</th>
        </tr>
        <tr>
            <td>홍길동</td>
            <td>30</td>
            <td>개발</td>
        </tr>
        <tr>
            <td>김철수</td>
            <td>35</td>
            <td>디자인</td>
        </tr>
    </table>

    <h3>📌 제품 목록</h3>
    <table id="table2">
        <tr>
            <th>제품명</th>
            <th>가격</th>
            <th>재고</th>
        </tr>
        <tr>
            <td>노트북</td>
            <td>1,500,000</td>
            <td>10</td>
        </tr>
        <tr>
            <td>스마트폰</td>
            <td>900,000</td>
            <td>20</td>
        </tr>
    </table>

    <button onclick="downloadExcel()">📥 엑셀 다운로드</button>

    <script>
        function downloadExcel() {
            // 1. HTML 테이블을 시트로 변환
            let table1 = document.getElementById("table1");
            let table2 = document.getElementById("table2");

            let sheet1 = XLSX.utils.table_to_sheet(table1);
            let sheet2 = XLSX.utils.table_to_sheet(table2);

            // 2. 새 엑셀 파일(워크북) 생성 후 시트 추가
            let workbook = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(workbook, sheet1, "직원 목록");
            XLSX.utils.book_append_sheet(workbook, sheet2, "제품 목록");

            // 3. 엑셀 파일로 다운로드
            XLSX.writeFile(workbook, "multi_sheet.xlsx");
        }
    </script>

</body>
</html>

✅ 설명

XLSX.utils.table_to_sheet(table1)
→ HTML 테이블을 엑셀 시트로 변환합니다. (table1 → "직원 목록", table2 → "제품 목록")
XLSX.utils.book_new()
→ 새로운 엑셀 파일(워크북)을 생성합니다.
XLSX.utils.book_append_sheet(workbook, sheet1, "직원 목록")
→ 변환한 테이블을 각각 다른 시트로 추가합니다.
XLSX.writeFile(workbook, "multi_sheet.xlsx")
→ .xlsx 형식으로 저장하여 다운로드합니다.

✅ 결과

다운로드된 multi_sheet.xlsx 파일을 열어보면 "직원 목록", "제품 목록" 두 개의 시트가 각각 생성되어 있습니다.
HTML 테이블 데이터를 각각 다른 시트에 넣을 수 있으며, 시트 이름도 원하는 대로 설정 가능합니다.
기본적인 테이블 스타일(테두리 등)도 유지됩니다.

✅ 확장 가능

HTML 테이블이 여러 개일 경우 자동으로 모든 테이블을 시트로 변환하는 방식도 가능합니다.
document.querySelectorAll("table")을 사용하여 페이지의 모든 테이블을 가져와 동적으로 변환할 수 있습니다.

여러 개의 테이블을 자동으로 시트 추가하는 코드

function downloadExcel() {
    let workbook = XLSX.utils.book_new();
    let tables = document.querySelectorAll("table");

    tables.forEach((table, index) => {
        let sheet = XLSX.utils.table_to_sheet(table);
        let sheetName = "시트" + (index + 1); // 기본 시트명 설정
        XLSX.utils.book_append_sheet(workbook, sheet, sheetName);
    });

    XLSX.writeFile(workbook, "multi_table.xlsx");
}

✅ 결론

Blob 방식으로 HTML을 직접 .xls로 변환하면 여러 시트를 지원할 수 없음.
SheetJS (xlsx)를 사용하면 여러 개의 HTML 테이블을 각각 다른 시트로 변환할 수 있음.
스타일을 유지하면서 여러 시트로 저장 가능하며, 자동으로 모든 테이블을 처리하는 방식도 가능!

LIST

'Develop' 카테고리의 다른 글

JavaScript와 jQuery로 Input 태그에서 공백 입력 방지하기 (1)	2025.02.25
로그 파일에서 특정 문자열 찾기 cat, more 및 기타 명령어 활용법 (1)	2025.02.24
[JavaScript] ajax post 요청 form 내용 json 으로 전송 (0)	2025.02.21
Spring Framework의 Scheduled 스케줄 동적으로 실행 방법 (4)	2025.02.17
리눅스 서버 시간 확인하는 다양한 방법 (1)	2025.02.14

현재글[Javascript] html javascript 로 엑셀 다운로드 구현. 총정리

“Hello, World!" 거긴 어떤월드냐?