Report View 만들기(jspdf 한글 다운)

4/20-22 개발일기

회사에서 레포팅 툴을 사용해 계산서를 만들어야 할 일이 생겼는데, 계산서 형식이 하나로 정해져있는데다가 차트 같은 것도 없는 기본 양식이어서 유료 레포팅 툴을 구매하긴 좀 아깝다고 생각했다. 그래서 처음엔 오픈소스를 알아봤다가 삽질만 하게 되서, 결국 셀프로 개발해보기로 시작했다.

참, 삽질했던 오픈소스 레포팅툴은 Jasper+iReport, BIRT 였다.

Jasper+iReport 는 너무 무거워서 .. 닭 잡는데 소잡는 칼 쓰는 격이었고,

BIRT 는 사실 아무리 찾아봐도 잘 이해가 안갔다... BIRT 자체를 구동시키는덴 성공했으나, SPRING 프레임웍에 로직을 녹여서 BIRT에 데이터를 전송하는 부분에서 헤매다가 때려침. 그리하여.. 필요한 기능들을 아래와 같이 정리해서 그냥 직접 개발해보기로 했다. 어차피 템플릿은 하나니깐.

1. 예쁘게 디자인 

부트스트랩의 상단 고정 nav bar를 이용하여 툴바를 제작했다. 툴바에 들어갈 기능은 인쇄, PDF다운, 메일발송으로 한정. 

2. 인쇄 기능 

그냥 인쇄 하면 nav bar까지 인쇄된다. 계산서 컨텐츠만 나오도록 특정 div 영역만 print 해주는 jQuery 라이브러리를 찾았다. printThis 라이브러리다. 사용법은 간단하다. printThis js 를 import 해주고 아래와 같이 작성.

//print 버튼 클릭시 report div 내용이 인쇄됨

$("#print").click(function() {
    $("#report").printThis();
}

3. PDF 다운

삽질과 삽질을 거듭하게 했던 PDF 다운로드. itext 라이브러리를 사용한 Java pdf 다운로드 기능도 있었지만, 이미 예쁘게 만들어놓은 HTML을 그대로 사용하고 싶었기 때문에 마침 검색하다 찾은 jspdf 라이브러리를 활용하기로 했다. 

jspdf 는 라이브러리 import 하는 것부터 난관을 겪었다. js가 너무 많아서 뭘 import 하고 안해야되는 지 몰라서 헤매다가 예제에서 정답을 얻었다. 아래 예제를 import 하면 된다

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js"</script> 

예제 찾아서 열심히 구현해봤는데 기껏 해둔 한글이 모조리 깨진다. 다른 방법을 찾아보니 html2canvas.js 라는 라이브러리가 있었다. 이름에서 알겠지만 html을 canvas로 바꿔주는 라이브러리다. 한글이 들어간 화면을 그대로 canvas로 뜨고, canvas를 pdf로 저장하기로 했다. (이걸 위해서는 html2canvas.js 를 추가로 import 해야함!!)

//pdfdown 버튼 클릭시 report 하위 div가 canvas 변환 -> pdf 다운로드
$("#pdfdown").click(function(){
     html2canvas(document.getElementById("report"), {
         onrendered: function(canvas) {
             var imgData = canvas.toDataURL('image/png');
             console.log('Report Image URL: '+imgData);
             var doc = new jsPDF('p', 'mm', [297, 210]); 
             doc.addImage(imgData, 'PNG', 10, 10, 190, 95);
             doc.save('sample-file.pdf');
          }
    }); 
});

심플하게 썼지만.... 정말 고생많이 했다 ㅜㅜ 한글 레퍼런스가 없기도 하고.. 흑..

암튼 이게 누군가에게는 또 도움이 되었으면 하는 바람으로 .. 오늘의 삽질 종료.