2020-01-02

아래 링크로 들어가면, datatables에서 클립보드에 복사, csv로 다운로드, 엑셀로 다운로드, pdf로 다운로드, 프린트를 쉽게 할 수 방법이 나와 있다.
링크 https://datatables.net/extensions/buttons/examples/initialisation/export.html

그중에서 필자는 보통 엑셀출력을 많이 쓰는데, 엑셀출력만 할때 필요한 파일들로 예제를 구성해 보았다.
엑셀에 필요한 파일들로 구성 했을 경우, 클립보드에 복사하는 기능과 csv로 다운로드 하는 기능도 가능해진다.

<table id="example" class="display" style="width:100%">
	<thead>
		<tr>
			<th>이름</th>
			<th>직위</th>
			<th>지역</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>홍길동</td>
			<td>부장</td>
			<td>서울</td>
		</tr>
		<tr>
			<td>김원희</td>
			<td>과장</td>
			<td>인천</td>
		</tr>
		<tr>
			<td>김길자</td>
			<td>대리</td>
			<td>대전</td>
		</tr>
		<tr>
			<td>김길동</td>
			<td>대리</td>
			<td>인천</td>
		</tr>
	</tbody>
</table>

<link rel="stylesheet" href="/post_inc/datatables/jquery.dataTables.min.css">
<link rel="stylesheet" href="/post_inc/datatables/buttons.dataTables.min.css">

<script src="/post_inc/datatables/jquery.dataTables.1.10.20.min.js"></script>
<script src="/post_inc/datatables/dataTables.buttons.min.js"></script>
<script src="/post_inc/datatables/jszip.min.js"></script>
<script src="/post_inc/datatables/buttons.html5.min.js"></script>

<script type="text/javascript">
$(function(){
	$('#example').DataTable( {
		dom: 'Bfrtip',
		buttons: [
			{
				extend: 'excel'
				,text: '엑셀출력'
				,filename: '엑셀파일명'
				,title: '엑셀파일 안에 쓰일 제목'
			},
			{
				extend: 'copy'
				,text: '클립보드 복사'
				,title: '클립보드 복사 내용'
			},
			{
				extend: 'csv'
				,text: 'csv출력'
				,filename: 'utf-8이라서 ms엑셀로 바로 열면 글자 깨짐'
			},
		]
	});
})
</script>

주의사항은,
1. html에에서 data를 가져오는 구조는, thead를 포함하지 않으면 오류가 뜬다.
2. csv 파일은 ms엑셀이 깔려 있을경우 ms엑셀로 열릴텐데, 그러면 한글은 깨져서 표시된다.(ms엑셀을 그냥 연뒤에, 데이터 가져오기로 csv파일을 불러오면서 캐릭터셋을 지정해주면, 해결되긴 한다)