jspdf & html2canvas example

jspdf & html2canvas example

by Sinh Nguyen

HTML

<script src="https://mrrio.github.io/jsPDF/dist/jspdf.debug.js"></script>
<script src="https://mrrio.github.io/jsPDF/examples/js/basic.js"></script>
<script src="https://github.com/niklasvh/html2canvas/releases/download/0.5.0-alpha1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<button type="button" id="pdfDownloader">Download</button>
<div id="printDiv">
  <h2>Hello World</h2>
  <p>
    this content will be printed.
  </p>
</div>

JavaScript

$(document).ready(function(){

	//pdf 다운로드 	
	$("#pdfDownloader").click(function(){
	
        html2canvas(document.getElementById("printDiv"), {
            onrendered: function(canvas) {

                var imgData = canvas.toDataURL('image/png');
                console.log('Report Image URL: '+imgData);
                var doc = new jsPDF('p', 'mm', [297, 210]); //210mm wide and 297mm high
                doc.setFontSize(40);
doc.text("Công an Lào Cai",0, 20);
doc.setFontSize(40);
doc.text("PHÒNG CẢNH SÁT GIAO THÔNG",0, 41);
doc.text("Độc lập - Tự do - Hạnh phúc",338, 42);
                doc.addImage(imgData, 'PNG', 10, 10);
                doc.save('sample.pdf');
            }
        });

	});
	
	
})