JSFiddle - React, Tailwind, and code Playground

by Darko

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jspdf/0.9.0rc1/jspdf.min.js"></script>
<!doctype html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 </head> 

  <body>
  
    <div id="prod">
      <h1>
      testing
      </h1>
      <img id="prod-image-product_option_bg" style="z-index:0;" class="img-responsive bg" src="https://petergibbons.github.io/tabularasa/dist/img/bg.png" />
      <img id="prod-image-product_option1" style="z-index:1;" class="img-responsive product-option" src="https://petergibbons.github.io/tabularasa/dist/img/Loading_Table_Laminate.png" />
      
     </div>
    
    <button id="example-submit">
    PDF IT!
    </button>
    
    
    
    
  
  </body>

</html>

CSS

img{width:500px;}
.product-option { position: absolute; top: 0; left: 0; min-height:300px; }

html, body {
  margin: 0;
  padding: 0;
}

JavaScript

//add product image
$("#example-submit").click(function(){
		var doc = new jsPDF('p', 'pt','a4',true);
    doc.setFontSize(16);
    doc.setTextColor(80, 77, 78);
    doc.text(15, 2, 'should be an image under here'); 
    html2canvas($("#prod"), {
        useCORS : true,
        onrendered: function(canvas) {
           var imgData = canvas.toDataURL('image/jpeg');
           
           doc.addImage(imgData, 'JPEG', 15, 0, 34, 37);
           //doc.addImage(imgData, 'JPEG', leftmargin, 120, 485, 270, undefined,'FAST'); // tried compression as well
            console.log(imgData);
            $('#prod').append(canvas);
            doc.save('Spec_Sheet.pdf');
        }
    });
    alert('did it');
});