[js] jquery datatable pdf 한글 깨짐 해결

기본적으로 datatable 사이트에서 제공해주는 

pdfmake.min.js

vfs_fonts.js

파일이 pdf 다운로드 기능을 제공해 주는 플러그인이다.

 

하지만 한글 영역을 다운로드 하면 공백으로 나오는 현상을 볼수 있다.(참고로 html5 버전으로 했음)

 

이유는 두개 파일에  한글이 지원되는 폰트가 안들어갔다.

 

그래서 한국 사람들이 열심히 찾은 방법을 정리하겠다.

 

우선 grunt 라는 걸 이용해야 했다.(참고 : https://nuli.navercorp.com/community/article/1132682)

 

grunt는 node를 통해 설치한다.

 

1. npm install -g grunt-cli

2. https://nuli.navercorp.com/community/article/1132682 에 들어가서 소스를 다운받는다. pdfmake-master.zip 이라는 파일로 다운로드 된다.

3. 압축을 푼후 \examples\fonts 경로에 원하는 폰트를 추가한다.

4. cmd창에서 해당 폴더로 이동후

npm install grunt --save-dev

npm init 실행

Gruntfile.js 파일이 생성된것을 볼수 있다.

해당 파일을 열어보면

grunt.loadNpmTasks('grunt-mocha-cov');

grunt.loadNpmTasks('grunt-jsdoc');

grunt.loadNpmTasks('grunt-contrib-jshint');

grunt.loadNpmTasks('grunt-text-replace');

grunt.loadNpmTasks('grunt-browserify');

grunt.loadNpmTasks('grunt-contrib-uglify');

grunt.loadNpmTasks('grunt-dump-dir');

grunt.loadNpmTasks('grunt-contrib-concat');

 

이 보인다. 이것들을 제각각 다 인스톨 한다.

npm install grunt-mocha-cov --save-dev

npm install grunt-jsdoc --save-dev

npm install grunt-contrib-jshint --save-dev

npm install grunt-text-replace --save-dev

npm install grunt-browserify --save-dev

npm install grunt-contrib-uglify --save-dev

npm install grunt-dump-dir --save-dev

npm install grunt-contrib-concat --save-dev

 

다 끝났으면

grunt dump_dir 실행

그럼 \build 폴더에 vfs-fonts가 새로 생성 될 것이다.

 

5. 같은 경로 있는 pdfmake.js(pdfmake.min.js) 파일을 열어서

Roboto:{normal:"Roboto-Regular.ttf",bold:"Roboto-Medium.ttf",italics:"Roboto-Italic.ttf",bolditalics:"Roboto-Italic.ttf"} 

가 있는 곳에

hangul:{normal:"malgun.ttf",bold:"malgunbd.ttf",italics:"malgun.ttf",bolditalics:"malgun.ttf"}

을 추가해주고

위에 Roboto 선언 된 부분 빼고 나머지 Roboto 라고 써 있는 부분을 다 hangul 로 바꿔 주면 된다.

 

끝..

 

다 귀찮으니까, 완성 된 파일을 첨부 하겠다.

pdfmake.min.js

0.40MB

vfs_fonts.zip

4.68MB