JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://raw.githubusercontent.com/niklasvh/html2canvas/master/dist/html2canvas.js"></script>
<script src="https://raw.githubusercontent.com/MrRio/jsPDF/master/dist/jspdf.min.js"></script>
<body>
  <button id="create_pdf" class="btn btn-primary btn-large">Download PDF</button>

  <br>
  <br>

  <div id="report">
    <h1> PDF REPORT </h1>
    <pre>
    asdakd ja asd asdjasd a
    sdasdasd asd f asd
     asd asd asd asdas d
     asd asd asd asd  asd
     asd asd asd asd 
     asd asd sad 
  </pre>
  </div>

</body>

JavaScript

$(document).ready(function() {
   var form = $('#report');
   var cache_width = form.width();
   var a4 = [595.28, 841.89];


   $('#create_pdf').on('click', function() {
     $('body').scrollTop(0);
     createPDF();
   });

   //create pdf
   function createPDF() {
     getCanvas().then(function(canvas) {
       var imgWidth = 200;
       var pageHeight = 290;
       var imgHeight = canvas.height * imgWidth / canvas.width;
       var heightLeft = imgHeight;
       var doc = new jsPDF('p', 'mm');
       var position = 0;

       var img = canvas.toDataURL("image/jpeg");



       doc.addImage(img, 'JPEG', 0, position, imgWidth, imgHeight);
       heightLeft -= pageHeight;



       while (heightLeft >= 0) {
         position = heightLeft - imgHeight;
         doc.addPage();
         doc.addImage(img, 'JPEG', 0, position, imgWidth, imgHeight);
         heightLeft -= pageHeight;
       }


       doc.save('Report.pdf');
       form.width(cache_width);
     });
   }


   // create canvas object
   function getCanvas() {
     form.width((a4[0] * 1.33333) - 80).css('max-width', 'none');
     return html2canvas(form, {
       imageTimeout: 2000,
       removeContainer: false
     });
   }

 });