jquery DataTables pdf/csv 한글 깨짐 현상 수정

DataTables은 적은 코드로도 정렬, 검색, export 등의 다양한 기능을 제공하기 때문에 데이터 출력을 위해 자주 사용하는 컴포넌트입니다. 

그런데 처음 사용할 때 pdf, csv export 시 한글이 비거나 깨져 출력됩니다. 이 글에서는 이를 해결하는 방법을 정리하겠습니다.

PDF 한글 출력 이슈 해결 방법

DataTables을 다운받으실 때 해당 사이트에서 Extensions을 선택할 수 있으며, 이중 pdfmake를 선택할 수 있습니다.

다운받은 압축 파일을 열어보면 pdfmake 코드를 확인할 수 있는데, 

pfdmake.js(.min.js), vfs_fonts.js에 실질적인 폰트 데이터가 들어가 있는 것을 확인하실 수 있습니다.

여기에 우리가 사용할 한글 폰트 데이터를 추가해야 합니다. 아래와 같은 순서로 작업을 하면 됩니다.

• npm install (빌드에 필요한 모듈들을 설치합니다.)
• pdfmake-master\examples\fonts 에 필요한 폰트를 추가
• npm run build 실행
• pdfmake-master\build 폴더에서 pdfmake.js , pdfmake.min.js , vfs_fonts.js 파일이 생성된 것을 확인
• vfs_fonts.js에 원하는 파일만 추가하는 방법은 아래와 같습니다.
  • pdfmake-master\examples\fonts에 사용할 폰트를 추가합니다.
  • node  build-vfs.js "examples/fonts" 를 실행하면 build 폴더에 vfs_fonts.js 파일만 갱신됩니다.

pdfmake.min.js(혹은 pdfmake.js) 와 vfs_fonts.js를 설치해 사용하시면 됩니다. 

만약 사용하는 폰트가 특정되지 않거나 아무 폰트든 상관없이 한글이 나오기만 하면 된다면... 이 링크 (강추!! 다운받아서 사용하세요. ^^a)를 참고하시면 됩니다. 

 

CSV 한글 출력 이슈 해결 방법

테이블 생성 옵션의 buttons : [ 'csv']로 된 부분을 buttons : [ { extend: 'csv', charset: 'UTF-8', bom: true }]로 수정하시면 간단히 해결됩니다.

사실 오래전에 제가 보려고 간단히 정리했던 글인데 이제서야 올리네요. 도움이 되셨기를... ^^