By aPOST in 자바스크립트 — 2023년 12월 23일

HTML 테이블을 엑셀 파일로 저장하기

거의 대부분의 개발 환경에서 네이티브 엑셀 파일을 생성하고 다운로드 할 수 있도록 구현하는 방법은 서버사이드 기능으로 구현됩니다.

서버측 언어/기술로 코딩된 라이브러리나, 컴포넌트를 주로 사용하며, 화면 상에 보이는 표나 리포트 형태로 보이는 데이터를 엑셀 파일로 저장하는 것은 서버사이드의 기능 구현 방식을 주로 사용합니다.

엑셀로 저장 가능한 데이터가 대부분 테이블 형태로 표현이 되는 되는 데이터이기 때문에 웹 웹브라우저에 표시되는 화면 그대로 HTML 파일로 저장한 후, 엑셀에서 일부 가공을 하면 그대로 사용할 수 있기도 합니다.

어쨋든 이 방법도 네이티브 엑셀 파일은 아니기 때문에 이런 저런 번거로운 재가공 작업을 해야하고 데이터 포맷을 맞추는 번거로움이 있게됩니다.

자바스크립트 라이브러리를 이용하면, 웹브라우저에 보이는 테이블을 그대로 네이티브 엑셀 파일로 저장할 수 있습니다.

문자열과 숫자 포맷을 구분할 수 있기 때문에 서버사이드에서 생성하는 엑셀 파일 못지 않은 괜찮은 형태의 네이티브 엑셀 파일을 생성할 수 있습니다.

서버단의 기능 구현이나 서버 성능 부하가 없고, 웹페이지 테이블 그대로 네이티브 엑셀 파일로 저장하기 때문에 서버단의 구현에 어려움이 있을 경우 간편하게 구현할 수 있습니다.

다만, 한가지 제약 사항이 있습니다.

웹브라우저에서 자바스크립트 라이브러리를 이용해 테이블 데이터를 읽어 네이티브 엑셀 파일로 변환하는 것이기 때문에 사용자 PC의 CPU 및 메모리 자원을 사용합니다.

테이블의 크기가 아주 큰 경우, 느린 PC나 모바일 기기에서는 생성 시간이 오래 걸릴 수 있습니다.

대략 몇 백행 안쪽의 행을 가진 테이블이라면 쾌적하겠지만, 몇 천행 이상이 되면 다운로드 시작까지 몇 초 이상의 지연이 발생할 수 있습니다.

예제에 사용하는 HTML 내용은

1. 자바스크립트 라이브러리 다운로드 및 링크 연결

https://github.com/SheetJS/sheetjs

다운로드 받아 압축을 푼 후 dist 폴더에서

xlsx.core.min.js 파일을 복사해 가져옵니다.

https://github.com/eligrey/FileSaver.js

다운로드 받아 압축을 푼 후 dist 폴더에서

FileSaver.min.js, FileSaver.min.js.map 2개의 파일을 복사해 가져옵니다.

https://github.com/clarketm/TableExport <- 제작자 최신 버전은 NPM 이나 Bower 로 설치해야 합니다. 깃헙 아카이브 버전입니다.

다운로드 받아 압축을 푼 후 dist/js 폴더에서

tableexport.js, tableexport.min.js 파일을 복사해 가져옵니다.

TableExport 라이브러리에 대한 자세한 사용 설명은

https://tableexport.v5.travismclarke.com/

에서 확인할 수 있습니다.

HTML 파일에 라이브러리 링크를 붙입니다.

2. 초기화하기

TableExport 라이브러리를 초기화해야 합니다.

초기화 자바스크립트 파일을 하나 만듭니다.

여기서는 "saveexcel.js"로 하고 위의 자바스크립트 링크를 한줄 추가해줍니다.

HTML 파일은 다음과 같이 구성합니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="xlsx.core.min.js"></script>
    <script src="FileSaver.min.js"></script>
    <script src="tableexport.min.js"></script>
    <script src="saveexcel.js"></script>
</head>
<body>
    <table id="exceltable">
    <tr>
        <th>열1</th>
        <th>열2</th>
        <th>열3</th>
        <th>열4</th>
        <th>열5</th>
        <th>열6</th>
        <th>열7</th>
        <th>열8</th>
        <th>열9</th>
    </tr>
    <tr>
        <td>item1</td>
        <td>item2</td>
        <td>item3</td>
        <td>item4</td>
        <td>item5</td>
        <td>item6</td>
        <td>item7</td>
        <td>item8</td>
        <td>item9</td>
    </tr>
    <tr>
        <td>item1</td>
        <td>item2</td>
...

자바스크립트 파일 내용은 다음과 같습니다.

DOM 객체가 로딩된 후 TableExport 객체를 로딩합니다.

위의 테이블 id를 아래 초기화를 하는 id와 맞춰줘야 합니다.

document.addEventListener('DOMContentLoaded', function(){
    var table = TableExport(document.getElementById("exceltable"), {
        headers: true,        // (Bool), 테이블의 <thead> 태그 안에 <th> 나 <td> 가 있으면 표시함 (기본: true)
        footers: false,       // (Bool), 테이블의 <tfoot> 태그 안에 <th> 나 <td> 가 있으면 표시함, (기본: false)
        formats: ["xlsx"],    // (String[]), 저장할 파일 포맷 반드시 배열 타입이어야 함, 아니면 에러 발생. (기본: ['xlsx', 'csv', 'txt'])
        filename: "exceldata",// 다운로드 파일명(확장자 제외하고 이름만). (기본: 'id')
        bootstrap: false,     // (Bool), 부트스트랩 사용시 true, 사용시 부트스트랩 버튼 스타일 유지해줌. (기본: true)
        exportButtons: true,  // (Bool), 선택한 확장자 포맷들로 자동으로 내장 버튼을 출력해줌. (기본: true)
        position: "top",      // (top, bottom), 캡션 표시 위치(버튼이 출력되는 위치로 테이블 상단(top), 하단(bottom)을 선택. (기본: 'bottom')
        ignoreRows: null,     // (Number, Number[]), 엑셀 파일 저장시 제외할 테이블 행을 숫자, 또는 숫자 배열로 지정. (기본: null)
        ignoreCols: null,     // (Number, Number[]), 엑셀 파일 저장시 제외할 테이블 열을 숫자, 또는 숫자 배열로 지정. (기본: null)
        trimWhitespace: true, // (Boolean), 테이블 안의 텍스트 앞뒤에 붙은 줄바꿈, 공백, 탭을 모두 제거해줌. true 권장. (기본: false)
        RTL: false,           // (Boolean), 엑셀 워크시트를 오른쪽에서 왼쪽으로 출력함. 아랍어 전용으로 false 고정. ( (기본: false)
        sheetname: "Sheet1"   // (id, String), 시트이름 (기본: 'id')
    });
})

로딩후에는 아래처럼 엑셀 파일 다운로드 버튼이 테이블 상단에 표시됩니다.

CSS로 조금 다듬어서 보기좋게 만든 것이지만, 기본적인 기능은 동일 합니다.

3. 엑셀 파일 다운로드

초기화가 완료되면 테이블 상단에 "Export to xlsx" 버튼, 또는 링크가 생깁니다.

클릭하면 테이블 내용 그대로 네이티브 엑셀 파일이 다운로드 됩니다.

다운로드가 안되는 경우 포함할 자바스크립트 라이브러리 파일이 누락되었거나, 초기화 인자를 잘못 지정해 초기화에 실패한 것입니다.

웹브라우저 F12키를 눌러 콘솔창 등에 에러가 표시된 내용을 확인해본 후 에러 내용을 수정해야 합니다.