[제이쿼리 jQuery] dataTable 엑셀 기능 구현 / dataTable 엑셀 버튼 안 보일 때! copy, PDF, print 모두 다

안녕하세요.
디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다.

 

이번 포스팅에서는
자바스크립트나 제이쿼리로 개발할 때 사용하는
dataTable에 엑셀 기능을 추가하는 방법에 대해 알아보겠습니다.

 

생각 보다 진짜 간단하니까 천천히 따라해 주세요 :)

1. 해당 내용을 복사 후 > html body 하단에 붙여넣기

<!-- 엑셀 --> <script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script> <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script> <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script>

 

2. js 파일의 dataTable 코드에 엑셀 기능 추가하기

이미지의 238번~243번 줄이 해당 내용입니다.
이 코드를 추가 했을 때 dataTable에 '엑셀 다운로드'버튼이 안 생긴다면,
십중팔구 1번 과정을 생략한 경우예요.
(는 사실 내 이야기)
이렇게 파일명(title), 버튼에 들어갈 글자(text)까지 정할 수 있습니다.
엑셀 말고 복사, PDF, 프린트 기능이 사용하고 싶다면,
extend 안에 'copy', 'pdf', 'print'등을 넣어주면 됩니다.

 

3. dataTable 확인

짜잔! 해당 버튼을 누르면 '데이터 테이블 엑셀파일'의 이름을 가진 엑셀이 다운로드됩니다.