반응형
Notice
Recent Posts
Recent Comments
Link
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Tags more
Archives
Today
Total
관리 메뉴

Life goes slowly...

[Javascript] 자바스크립트(JS)의 HTML 내용을 엑셀 다운로드하기 본문

프로그래밍/Javascript

[Javascript] 자바스크립트(JS)의 HTML 내용을 엑셀 다운로드하기

빨강소 2021. 3. 15. 16:30
728x90
반응형

 

 

자바스크립트(Javascript)의 엑셀 다운로드 하기

자바스크립트(Javascript)에서 HTML로 된 table 형태로 된 데이터를 엑셀로 다운로드를 받는 방법입니다.

프론트엔트 개발에 많이 사용될거라 생각되어 작성하여 봅니다.

Java 형태로 된 개발은 많이 사용되었지만 API로 호출하여 가져온 데이터를 HTML 형태로 만들어져 있는 Table 데이터를 자바스크립트(Javascript)로 엑셀 다운로드 하는 방법입니다.

 

<table class="table" id="excelTable">
	<thead>
    	<tr>
          <td>Column 1</td>
          <td>Column 2</td>
          <td>Column 3</td>
        </tr>
    </thead>
   
   <tbody>
      <tr>
          <td>데이터1_1</td>
          <td>데이터1_2</td>
      </tr>
      <tr>
          <td>데이터2_1</td>
          <td>데이터2_2</td>
      </tr>	
      <tr>
          <td>데이터3_1</td>
          <td>데이터3_2</td>
      </tr>
    </tbody>
</table>

<button type='button' id='buttonExcel'><a>엑셀다운로드</a></button>

 

버튼의 onclick 이벤트를 생성하여 제이쿼리(jQuery)로 클릭 이벤트 함수를 만들면됩니다.

 

//엑셀 다운로드 함수
$('#buttonExcel').click(() => {
	ExcelDownload("excelTable","ExcelData");
});


function ExcelDownload(id, title) {
    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>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 = $('#' + id).clone();
    exportTable.find('input').each(function (index, elem) { 
    	$(elem).remove(); 
    });
    tab_text += exportTable.html();
    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 = title + '.xls';
    
    // IE 환경 설정
    if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) {
        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);
    }


};

 

 

728x90
반응형
저작자표시 비영리 변경금지

'프로그래밍 > Javascript' 카테고리의 다른 글

[Javascript] 자바스크립트(JS)의 자식노드 접근 - childNodes  (0) 2021.03.24
[jQuery] 제이쿼리(jquery)의 형제요소를 찾는함수 - Siblings()  (0) 2021.03.23
[Javascript] 자바스크립트(JS) - UTC 날짜를 현지시간(Local)으로 변경  (0) 2021.03.20
[Javascript] 자바스크립트(JS)의 객체정렬함수 - sort(), reverse()  (0) 2021.03.16
[jQuery] 제이쿼리(jquery)로 Cookie 관리하기  (0) 2021.03.12
[jQuery] 제이쿼리(jquery)의 radio button 확인  (0) 2021.03.10
[Javascript] 자바스크립트의 버튼(button)에 disabled 속성 활용  (0) 2021.03.05
[Javascript] innerText와 innerHTML 차이점  (0) 2021.03.03
'프로그래밍/Javascript' Related Articles more
Comments