[Jquery] 엑셀 다운로드 기능

[Jquery] 엑셀 다운로드 기능 만들기

html

<div>
	<button id="excelDown">다운로드</button>
</div>

<div>
	<table id= "tableAll">
		<colgroup>
			<col width="auto" />
			<col width="auto" />
			<col width="auto" />
			<col width="auto" />
		</colgroup>
		<thead>
			<tr>
				<th>첫번째 데이터</th>
				<th>두번째 데이터</th>
				<th>세번째 데이터</th>
				<th>네번째 데이터</th>
			</tr>
		</thead>
		<tbody id="tableData">
		</tbody>
	</table>
</div>

• 테이블 태그 안에 아이디 값을 만들어준다.
  ( ex : <table id="tableAll">)

js

$(function () {
	$("#excelDown").on("click",function(){
		var header = {};
		header.columns = [];
		//테이블 id
		var rowList = document.getElementById('tableAll').rows;

		var head = rowList[0];
      
		for(i = 0; i< head.cells.length ; i++){
			var headColumn = {};
			headColumn.label = head.cells[i].innerHTML.replace(/<[^>]*>?/g, '');
			headColumn.key = head.cells[i].innerHTML;
			headColumn.width = 20;
			header.columns.push(headColumn);
		}
			
		var headArr = new Array();
		var rowCount = 0;
		var workbook = new ExcelJS.Workbook();
		workbook.creator = '작성자';
		workbook.lastModifiedBy = '최종 수정자';
		workbook.created = new Date();
		workbook.modified = new Date();
		var sheet = workbook.addWorksheet('Sheet');
		sheet.columns = header.columns;
		for( var j=0; j < header.columns.length; j++){
			headArr.push(header.columns[j].label);
		}
		sheet.addRow(headArr);
		var cellData = [];
		for( var j=1; j<rowList.length; j++ ) {
			var data = {};
			for(i = 0; i< head.cells.length ; i++){
				data[head.cells[i].innerHTML] = rowList[j].cells[i].innerHTML
			}
			cellData.push(data)
		}
		for( var i=0;i<rowList.length;i++ ) {
			sheet.addRow(cellData[i]);
		}
		workbook.xlsx.writeBuffer().then( function(data) {
			var blob = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
			var date = new Date();
			var year = date.getFullYear().toString();
			var month = date.getMonth() + 1;
			month = month < 10 ? '0' + month.toString() : month.toString();
			var day = date.getDate();
			day = day < 10 ? '0' + day.toString() : day.toString();
			var hour = date.getHours();
			hour = hour < 10 ? '0' + hour.toString() : hour.toString();
			var minites = date.getMinutes();
			minites = minites < 10 ? '0' + minites.toString() : minites.toString();
			var seconds = date.getSeconds();
			seconds = seconds < 10 ? '0' + seconds.toString() : seconds.toString();
         	//파일 이름 설정하는 부분
			saveAs(blob, '엑셀 다운로드 기능 -'+year + month + day + hour + minites + seconds+'.xlsx');
		});
	})
});

• excelDown 버튼을 클릭했을경우 이벤트 발생처리를 하게된다.
• tableAll 에있는 rows를 가져와서 엑셀 데이터로 만들어준다.
• saveAs 에서 파일명을 설정할 수 있다.