JSFiddle - React, Tailwind, and code Playground

by luamelo

HTML

<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.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">
      <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 class="tobase64" src="https://img.paratic.com/dosya/2017/10/star-wars-unutulmaz-kilan-efsane-karakterleri-687x400.jpg" width="400" alt="">
      <h3>Another header!</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce egestas elementum justo sed placerat.</p>
      <div class="panel panel-primary">
        <div class="panel-heading">Panel Heading</div>
        <table class="table table-bordered table-striped">
          <thead>
            <tr>
              <th>Apples</th>
              <th>Bananas</th>
              <th>Carrots</th>
              <th>Donuts</th>
              <th>French Fries</th>
              <th>Grapes</th>
              <th>Ham</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>100%</td>
              <td>Lorem ipsum dolor sit</td>
              <td>0.2245</td>
              <td>$1.25</td>
              <td>1231235</td>
              <td>asdf</td>
              <td>11/11/12</td>
            </tr>
            <tr>
              <td>100%</td>
              <td>Lorem ipsum dolor sit</td>
             ...

CSS

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

JavaScript

function toDataURL(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.onload = function() {
    var reader = new FileReader();
    reader.onloadend = function() {
      callback(reader.result);
    }
    reader.readAsDataURL(xhr.response);
  };
  xhr.open('GET', url);
  xhr.responseType = 'blob';
  xhr.send();
}


toDataURL($('.tobase64').attr('src'), function(dataUrl){
  $('.tobase64').attr('src', dataUrl);
});

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

    pdf.addHTML(content, 0, 0, options, function(){
    		var blob = pdf.output("blob");
    		window.open(URL.createObjectURL(blob));
        //pdf.save("test.pdf");
        content.removeAttr('style');
    });
});