SlickGrid 엑셀 익스포트하기

SlickGrid의 데이터를 엑셀로 익스포트하는 방법입니다.

즉 포론트엔드에 표시된 SlickGrid의 데이터를 엑셀로 내려받을 수 있는 기능입니다.

 

아래의 GitHub의 SlickGrid-Export-to-Excel/dist의 모든 파일을 서버의 특정위치에 복사하세요.

저는 /SlickGrid/dist에 복사했습니다.

https://github.com/ranjithprabhuk/SlickGrid-Export-to-Excel

GitHub - ranjithprabhuk/SlickGrid-Export-to-Excel: jQuery plugin to export the entire data from slick grid to excel. A client si

 

엑셀 익스포트 JS를 아래와 같이 HTML 헤더에 추가합니다.

 

    <script src="/SlickGrid/dist/js/require.js"></script>
    <script src="/SlickGrid/dist/js/underscore.js"></script>
    <script src="/SlickGrid/dist/jquery.slickgrid.export.excel.js"></script>

 

엑셀 익스포트 공용 함수
fileName : 엑셀 파일명 및 시트명
columns : SlickGrid의 컬럼 JSON
datas : SlickGrid의 데이터 JSON

 

function exportExcelForGrid(fileName, columns, datas){
	var excelOptions = {
		headerStyle: {
		    font: {
		        bold: true,  //enable bold
		        font: 12, // font size
		        color: '00ffffff' //font color --Note: Add 00 before the color code
		    },
		    fill: {   //fill background
		        type: 'pattern', 
		        patternType: 'solid',
		        fgColor: '00428BCA' //background color --Note: Add 00 before the color code
		    }
		},
		cellStyle: {
		    font: {
		        bold: false,  //enable bold
		        font: 12, // font size
		        color: '00000000' //font color --Note: Add 00 before the color code
		    },
		    fill: {   //fill background
		        type: 'pattern',
		        patternType: 'solid',
		        fgColor: '00ffffff' //background color --Note: Add 00 before the color code
		    }
		},
	};
	

	var excelData = [];
	for(var i = 0 ; i < datas.length ; i++){
		var data = datas[i];
		var str = "{";
		
		for(var j = 0 ; j < columns.length ; j++){
			if(j != 0) str += ",";
			
			var column = columns[j];
			
			var columnGroup = column.columnGroup;
			if(columnGroup == undefined) columnGroup = "";
			else columnGroup = "(" + columnGroup.replace(/(<([^>]+)>)/ig,"").replace("⊠", "") + ")";
			
			var columnName = column.name;
			columnName = columnName.replace(/(<([^>]+)>)/ig,"")
			
			var value = eval("data['" + column.field + "']");
			if(value == undefined) value = "";
			
			if(typeof(value) == "string"){
				if(value.indexOf("\"") > 0) value = value.replace(/"/g, "\\\"");
				str += "\"" + columnGroup + columnName + "\":\"" + value.replace(/\r/g, '').replace(/\n/g, '') + "\"";
			}else{
				str += "\"" + columnGroup + columnName + "\":" + value + "";
			}
		}
		str += "}";
		
		excelData[i] = JSON.parse(str);
	}
	
	$('body').exportToExcel(fileName + ".xlsx", fileName, excelData, excelOptions, function (response) {
        var link = document.createElement('a');
		link.setAttribute('href', response);
		link.setAttribute('download', fileName + '.xlsx');
		link.click();
    });
}

 

SlickGrid에 JSON 데이터를 넣은 경우

 

exportExcelForGrid("SlickGrid_엑셀", grid.getColumns(), grid.getData());

 

SlickGrid의 DataView를 사용해서 JSON 데이터를 넣은 경우

 

exportExcelForGrid("SlickGrid_엑셀", grid.getColumns(), dataView.getItems());