jspdf & html2canvas example

jspdf & html2canvas example

by Bryan McIntosh

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://html2canvas.hertzen.com/dist/html2canvas.min.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="aside-area-Legend" class="d-none">
  <div id="printDiv">
    <h2>Hello World</h2>
    <p>
      this content will be printed.
    </p>
  </div>
</div>

CSS

.d-none {
  display: none;
}

JavaScript

$(document).ready(function() {
  $("#pdfDownloader").click(function() {

    html2canvas(document.getElementById("printDiv"), {
        onclone: function(clonedDoc) {
        	//console.log(clonedDoc);
          clonedDoc.getElementById('aside-area-Legend').style.display = 'block';
        }
      })
      .then(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);
        doc.save('sample.pdf');
      });

  });
})