javascript, jsPDF를 사용해서 PDF에 테이블 넣기 (한글 가능)

개발환경 : Visual Studio 2015, asp.net MVC5

사용한 방법을 먼저 말하자면 PDF에 직접 테이블을 만들어 넣었다.

PDF에 테이블? 그리드?를 넣어야할 일이 생겼다. (테이블로 칭하겠다.)

구글링해보니 많은 사람들이 jsPDF를 사용하고 있었고, 한글이 나오지 않는다는 말이 많았다.

해결책? 임시방편?으로 테이블을 스크린샷떠서 PDF에 넣어버리는 방식을 사용하고 있었다.

직접 따라 해보니 스크린샷을 PDF규격에 맞춰 늘리고 줄이다보니 미관상 좋지않았다.

그래서 나는 코딩으로 만들어 넣기로 했다.

● index.html.

<div class="jumbotron">
    <h1>http://shiftkey.tistory.com/</h1>
</div>
 
<div class="row">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
        <button id="geneRatePdf">PDF</button>
    </div>
    <div class="col-md-4">
    </div>
</div>

● 메인 화면. PDF버튼을 클릭하면 지정한 이름으로 다운로드 함.

한글이 깨진다는건 검색만 하면 나오기 때문에 바로 한글이 들어간 PDF를 만들어보자.

● Script코드. 여기서 주목해야할 점은 doc.addFileToVFS이다. 외부Font를 추가할 수 있게 도와준다.

 
    var col = [];
    var row = [];
    $('#geneRatePdf').on('click', function () {
 
        //한글과 영어의 혼합
        col.push({ title: '가A', dataKey: 'c1' });
        col.push({ title: '나B', dataKey: 'c2' });
        col.push({ title: '다C', dataKey: 'c3' });
        col.push({ title: '라D', dataKey: 'c4' });
 
        row.push({ id: 1, c1: '안녕하세요', c2: 'ShiftKey', c3: '입니다.', c4: '잘부탁드립니다.' });
        row.push({ id: 2, c1: '간츠', c2: '나루토', c3: '둘리', c4: '레이브' });
        row.push({ id: 3, c1: '거위', c2: '노루', c3: '두루미', c4: '라이언' });
 
        var doc = new jsPDF();
        doc.addFileToVFS('malgun.ttf', malgun);
        doc.addFont('malgun.ttf', 'malgun', 'normal');
        doc.setFont('malgun');
        doc.setFontType('bold');
        doc.autoTable(col, row, {
            theme: 'grid',
            styles: {
                font: 'malgun',
                fontStyle: 'normal'
            },
            headerStyles: {
                fontSize: 15,
                font: 'malgun',
                fontStyle: 'normal'
            }
        });
 
        doc.setProperties({
            title: 'PDF타이틀',
        });
        doc.save('export.pdf');
    });

● 변수 margun. margun에는 넣고자하는 .ttf(폰트)를 base64로 인코딩한 값을 할당해줌. 인코딩한 사이트 주소를 주석으로 달아놓음.

var margun = '';
//https://www.giftofspeed.com/base64-encoder/ 

● 결과1. 한글과 영어의 혼합이 잘 됨.

● PDF title을 지정하면 우측상단에 마우스 갖다대면 보여짐.

궁금증이 생겼다. 많은 열을 지정하고, 데이터도 길면 어떻게 되지? 바로 해보자.

● Script코드에서 col과 row선언하는 부분. 9개의 열과 긴 데이터를 넣음.

var col = [];
var row = [];
 
col.push({ title: 'A', dataKey: '123' });    
col.push({ title: 'B', dataKey: '333' });
col.push({ title: 'C', dataKey: 'abc' });
col.push({ title: 'D', dataKey: 'ccc' });
col.push({ title: 'E', dataKey: 'a' });
col.push({ title: 'F', dataKey: 'b' });
col.push({ title: 'G', dataKey: 'c' });
col.push({ title: 'H', dataKey: 'd' });
col.push({ title: 'I', dataKey: 'e' });
col.push({ title: 'J', dataKey: 'f' });
 
row.push({ id: 0, 123: 'America', 333: 'Banana', abc: 'Car', ccc: 'Digital', xnx: 'ignore', a: 'Echo', b: 'FireFighter', c: 'Grid', d: 'Hoop', e: 'IceCream', f: 'Jeep' });
row.push({ id: 1, 123: 'Alpha', 333: 'Beta', abc: 'Charlee', ccc: 'Delta', xnx: 'ifgggg', a: 'Export', b: 'Freddie mercury', c: 'Google', d: 'Hearthstone', e: 'iPhone', f: 'Jquery' });
row.push({ id: 2, 123: 'Afro', 333: 'BTS', abc: 'Crome', ccc: 'Delegate', xnx: 'gngnld', a: 'Elephant', b: 'Friday', c: 'Groove', d: 'Hoverboard', e: 'Iceman', f: 'Jean grey' });
 

● 결과2. 문제점을 발견함. 많은 열을 사용하고, 데이터가 길어지면 ...으로 생략되는 경우 발생.

궁금증으로 인한 문제점은 아직 해결 못했다.ㅠ

최초의 목적인 "한글을 PDF에 제대로 나타내자" 였으니, 성공했다.

-끗-