jspdf & html2canvas example

jspdf & html2canvas example

by michae1

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>
<iframe src="https://www.lipsum.com/" id="remote">
</iframe>
</iframe>

JavaScript

$(document).ready(function(){

	//pdf 다운로드 	
	$("#pdfDownloader").click(function(){
	
        html2canvas(document.getElementById("remote"), {
            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.addImage(imgData, 'PNG', 10, 10);
                doc.save('sample.pdf');
            }
        });

	});
	
	
})