JSFiddle - React, Tailwind, and code Playground

by Nimitt Shah

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.min.js"></script>
<div id="content">
          <p>This is the element you only want to capture</p>	
    	   <p>This is the element you only want to capture</p>	
    	    <p>This is the element you only want to capture</p>	
    		 <p>This is the element you only want to capture</p>	
    		  <p>This is the element you only want to capture</p>	
        </div>
        <button id="print">Download Pdf</button>
        <footer>This is the footer</footer>

CSS

body {
      background: beige;
    }
    
    header {
      background: red;
    }
    
    footer {
      background: blue;
    }
    
    #content {
      background: yellow;
      width: 70%;
      height: 100px;
      margin: 50px auto;
      border: 1px solid orange;
      padding: 20px;
      overflow-y:auto;
    }
    .html2canvas-container { width: 3000px !important; height: 3000px !important; }

JavaScript

$(document).ready(function() {
     $('#print').click(function() {
     var currentPosition = document.getElementById("content").scrollTop;
      var w = document.getElementById("content").offsetWidth;
      var h = document.getElementById("content").offsetHeight;
     document.getElementById("content").style.height="auto";

      html2canvas(document.getElementById("content"), {
         
        dpi: 300, // Set to 300 DPI
        scale: 3, // Adjusts your resolution
        onrendered: function(canvas) {
          var img = canvas.toDataURL("image/jpeg", 1);
          var doc = new jsPDF('L', 'px', [w, h]);
          doc.addImage(img, 'JPEG', 0, 0, w, h);
    	  doc.addPage();
          doc.save('sample-file.pdf');
        }
      });
     document.getElementById("content").style.height="100px";
     document.getElementById("content").scrollTop = currentPosition;
    });
    
    });