html을 pdf 로 다운받게 해주는 js 소스 (한글일 경우) jspdf +html2canvas

jspdf를 사용하면 화면의 일정부분을 pdf로 다운받을 수 있습니다.

그런데 한글인 경우는 글자가 깨지는 경우가 되죠

딱히 따로 한글 언어셋을 지원해주지는 않는 거 같고

pdf 전환의 방법으로 

html -> canvas -> pdf의 방법을 주로 쓰게 되는 거 같습니다.

<textarea name="testpdf" id="testpdf" style="margin: 0px; height: 333px; width: 661px;"></textarea>

        <div id="editor"></div>             

        <button id="cmd">PDF</button>

  <script src="//cdnjs.cloudflare.com/ajax/libs/jspdf/0.9.0rc1/jspdf.min.js"></script>

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

<script>

$('#cmd').click(function () {

var doc = new jsPDF();

var specialElementHandlers = { 

    '#editor': function (element, renderer) { 

        return true; 

    }

}

html2canvas($("#testpdf"),{

    useCORS: true,

    allowTaint: true,

    onrendered:function(canvas){

        var imgData = canvas.toDataURL('image/jpeg');

        var doc = new jsPDF("p","mm");

console.log(imgData);

        doc.addImage(imgData,'JPEG',0,0);

        doc.save('test.pdf');

    }

});

});

</script>

추가설명

html2canvas($("#testpdf") 에서 선택자를 고르시면 되고

editor 영역은 jspdf에서 특별한 작업을 중간에 추가할때 사용합니다.

하지만 한글이 깨지는 현상때문에 jpeg=>jspdf로 전환하는 것이기 때문에

지금 중요한 부분은 jpeg를 pdf로 넣어주는 부분입니다

useCORS같은 것은 옵션들어가는 영역부분입니다

doc.save('test.pdf'); 저장 화일이름지정입니다.