자바스크립트만으로 HTML 테이블을 엑셀 출력하기

관리 메뉴

최근에 올라온 글

최근에 달린 댓글

방문자수

전체

오늘

어제

자바스크립트만으로 HTML 테이블을 엑셀 출력하기 본문

Javascript

자바스크립트만으로 HTML 테이블을 엑셀 출력하기

SaintsP 2020. 10. 5. 15:17

예전에 Java의 POI 라이브러리를 활용하여 HTML 테이블을 엑셀로 출력하는 방법에 대해 포스팅 한 적이 있습니다.

POI, JSON을 활용하여 HTML Table을 Excel 출력 하기

이번에는 서버 없이 순수 자바스크립트만으로 HTML 테이블을 엑셀로 출력하는 방법에 대해 포스팅하겠습니다.

이미 훌륭한 레퍼런스들이 많이 있었고 그 중 하나를 살짝 수정하여 사용하였습니다.

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
</script>
 
    function fnExcelReport(id) {
        
        var title = $("#logDate").val() + "_종합평가지표 조회수";
        
        var tab_text = '<html xmlns:x="urn:schemas-microsoft-com:office:excel">';
        tab_text = tab_text + '<head><meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">';
        tab_text = tab_text + '<xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>'
        tab_text = tab_text + '<x:Name>Sheet</x:Name>';
        tab_text = tab_text + '<x:WorksheetOptions><x:Panes></x:Panes></x:WorksheetOptions></x:ExcelWorksheet>';
        tab_text = tab_text + '</x:ExcelWorksheets></x:ExcelWorkbook></xml></head><body>';
        tab_text = tab_text + "<table border='1px'>";
        var exportTable = $('#' + id).clone();
        exportTable.find('input').each(function (index, elem) { $(elem).remove(); });
        tab_text = tab_text + exportTable.html();
        tab_text = tab_text + '</table></body></html>';
        var data_type = 'data:application/vnd.ms-excel';
        var ua = window.navigator.userAgent;
        var msie = ua.indexOf("MSIE ");
        var fileName = title + '.xls';
        //Explorer 환경에서 다운로드
        if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) {
            if (window.navigator.msSaveBlob) {
                var blob = new Blob([tab_text], {
                    type: "application/csv;charset=utf-8;"
                    });
                navigator.msSaveBlob(blob, fileName);
            }
        } else {
            var blob2 = new Blob([tab_text], {
                type: "application/csv;charset=utf-8;"
                });
            var filename = fileName;
            var elem = window.document.createElement('a');
            elem.href = window.URL.createObjectURL(blob2);
            elem.download = filename;
            document.body.appendChild(elem);
            elem.click();
            document.body.removeChild(elem);
        }
    }
        
</script>
 
 
<table id="tb1">
    .
    .
    .
</table>
 
<a href="#" onclick="fnExcelReport('tb1');">엑셀 다운</a>
 
Colored by Color Scripter
cs

출력한 엑셀 파일의 제목을 유동적으로 변경하고 싶으면 함수 안의 title을 유동적으로 설정해주면 됩니다.

출처 : https://newehblog.tistory.com/3

저작자표시

'Javascript' 카테고리의 다른 글

간단한 정규식을 활용한 input 입력 제한 (0)	2020.10.06
함수와 메소드의 this, 그리고 화살표 함수 (0)	2020.10.02
자바스크립트 Date Format 변경 하기 (0)	2020.09.29
자바스크립트 클로저 (0)	2020.09.25
호이스팅 정리 (0)	2020.09.24