'2021/07 글 목록

2021/07에 해당하는 글 4건

javascript Table 로 Excel 파일 생성 다운받기2021.07.29
유동적인 테이블 Td 셀 병합 rowspan 처리 Javascript 함수2021.07.22
Visual Studio Code FTP 설치하기2021.07.12
Visual Studio Code 한국어 팩 설치 방법2021.07.12

javascript Table 로 Excel 파일 생성 다운받기

Progmming/Javascript2021. 7. 29. 15:49

table id 를 지정해서

해당 테이블을 엑셀 파일로 생성시켜주는 함수.

테이블 아이디 , 파일명 , 시트명을 변수처리함.

    var makeToExcel = (function () { 
        var style = "<style> td,th {width:100px;} </style>";
        var uri = 'data:application/vnd.ms-excel;base64,'
            , template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->' + style + '<meta http-equiv="Content-Type" content="application/vnd.ms-excel; charset=utf-8"/></head><body><table border="1">{table}</table></body></html>'
            , base64 = function (s) {
                return window.btoa(unescape(encodeURIComponent(s)))
            }
            , format = function (s, c) {
                return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; })
            }
        return function (table, fileName , sheetName) {
            if (!table.nodeType) table = document.getElementById(table)
            var ctx = { worksheet: sheetName || 'Worksheet', table: table.innerHTML }
			console.log(table.innerHTML); 
            let a = document.createElement('a');
        a.href = uri + base64(format(template, ctx));
        a.download = fileName+'.xls';
        a.click();
        }
    })()
	
	makeToExcel('테이블아이디', '파일명' ,'시트명');

저작자표시

유동적인 테이블 Td 셀 병합 rowspan 처리 Javascript 함수

Open API/그 외 2021. 7. 22. 10:22

지정 항목의 tr > td 값에 값이 동일 한 경우 rowspan 처리해주는 Javascript 함수입니다.

주석 처리된 라인의 경우 contains 를 사용하여 포함된 조건이어서 일부 상황에서 정렬에 의해 해당 Row 사이에 다른 Row가 존재하는 경우 문제가 생길수 있는 상태인데

원작자의 글 댓글에 일치하는 조건으로 코드 개선해주신분이 계셔서 취합했습니다.

$(document).ready(function(e){
    genRowspan("td 클래스명");
});
 
function genRowspan(className){
    $("." + className).each(function() {
        //var rows = $("." + className + ":contains('" + $(this).text() + "')");
        var sText = $(this).text();
        var rows = $("." + className).filter(function() {
        	return $(this).text() == sText;
        });
        if (rows.length > 1) {
            rows.eq(0).attr("rowspan", rows.length);
            rows.not(":eq(0)").remove();
        }
    });
}

https://zero-gravity.tistory.com/311

[jQuery] 유동적인 테이블 셀병합 - rowspan

위와 같이 소속에 같은 데이터가 있을 경우 하나의 셀로 병합해주는 코드다. $(document).ready(function(e){ genRowspan("td 클래스명"); }); function genRowspan(className){ $("." + className).each(funct..

zero-gravity.tistory.com

https://api.jquery.com/contains-selector/

:contains() Selector | jQuery API Documentation

Description: Select all elements that contain the specified text. The matching text can appear directly within the selected element, in any of that element's descendants, or a combination thereof. As with attribute value selectors, text inside the parenthe

api.jquery.com