테이블을 엑셀로 다운로드

2019-12-13

excel download 만들기

목적

전체 리스트를 테이블로 출력한 후, 화면에 보여지는 부분을 엑셀 형식으로 다운로드 가능하게 만들어 보자. 다운로드 창이 나오고, 다운로드 시 해당 파일명을 자동으로 설정까지 해주기!


Spec

  • react.js ^16.8.6
  • mobx ^5.13.0

사실 구글에 검색하면 잘 나온다..(검색어 : Export html table data to Excel using JavaScript) 나는 그 글을 긁어왔을 뿐ㅎㅎ,, 다른 방법으로도 가능한데, 지금 내가 구현한 부분은 서버에 과부하를 생성하지 않도록 현재 화면에서 보여지는 것만 엑셀로 출력하도록 만든것임. 현재 화면 뿐만 아니라 전체 리스트를 다 갖고오고 싶다면 다른 방법을 써야 한다.



01 Store.js

@action
download() {
    const table = document.getElementsByTagName('table')[0];
    
    let tab_text = '<html xmlns:x="urn:schemas-microsoft-com:office:excel">';
        tab_text += '<head><meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">';
        tab_text += '<xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>'
        tab_text += '<x:Name>Test Sheet</x:Name>';
        tab_text += '<x:WorksheetOptions><x:Panes></x:Panes></x:WorksheetOptions></x:ExcelWorksheet>';
        tab_text += '</x:ExcelWorksheets></x:ExcelWorkbook></xml></head><body>';
        tab_text += "<table border='1px'>";

    let exportTable = table.cloneNode(true);

    tab_text += exportTable.outerHTML;
    tab_text += '</table></body></html>';
    let data_type = 'data:application/vnd.ms-excel';
    let ua = window.navigator.userAgent;
    let msie = ua.indexOf("MSIE ");
    let fileName = this.period + '_Table' + '.xls';

    // browser 처리
    if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) {
        //ie 용
        if (window.navigator.msSaveBlob) {
            let blob = new Blob([tab_text], {
                type: "application/csv;charset=utf-8;"
            });
            navigator.msSaveBlob(blob, fileName);
        }
    } else { //그외
        let blob2 = new Blob([tab_text], {
            type: "application/csv;charset=utf-8;"
        });
        let filename = fileName;
        let elem = window.document.createElement('a');
        elem.href = window.URL.createObjectURL(blob2);
        elem.download = filename;
        document.body.appendChild(elem);
        elem.click();
        document.body.removeChild(elem);
    }
}



02 Component.js

import React, {Component} from 'react';
import {inject, observer} from "mobx-react";

@inject(stores => ({
    store: stores.Store;
}))
@observer
class Table extends Component{
    render(){
        return(
            <div>
                <button>
                    <div onClick={ ()=> store.download() }>엑셀다운로드</div>
                </button>
            </div>
        );
    }    
}
export default Table;