JSFiddle - React, Tailwind, and code Playground

by luamelo

HTML

<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<main class="container" id="aqui">
      <div class="jumbotron">
        <h1>Cool Export Test Page!</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce egestas elementum justo sed placerat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin vehicula quam a dolor ullamcorper iaculis. In et laoreet est, commodo placerat lectus. Sed ac ullamcorper diam. Curabitur id sem leo. Proin non dictum massa. Aliquam et dui ante</p>
        <p>
          <button type="button" class="btn btn-primary btn-lg" id="download">Download PDF</button>
        </p>
      </div>
      <img...

CSS

body{background:green}
.table td {
  font-size: 12px;
}

JavaScript

$('#download').on('click', function(){
		var content = $('main');
    
    window.scrollTo(0,0);
    content.css('width', '745px');
    
    var options = {
        pagesplit: true,
        background:"#ffffff"
    };
    
    html2canvas(content, {
    		onrendered: function(canvas){
        	var img = canvas.toDataURL("image/png");
          var doc = new jsPDF();
          doc.addImage(img, 'JPEG', 0, 0);
          doc.save("test.pdf");
          content.removeAttr('style');
        }
    });



	  /*var pdf = new jsPDF('l', 'pt', 'a4');
    var options = {
        pagesplit: true,
        background:"#ffffff"
    };
    
    
    
    window.scrollTo(0,0);
    content.css('width', '745px');

    pdf.addHTML(content, 0, 0, options, function(){
        pdf.save("test.pdf");
        content.removeAttr('style');
    });*/
});