JSFiddle - React, Tailwind, and code Playground

by luamelo

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.debug.js"></script>
<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>
              <td>0.2245</td>
              <td>$1.25</td>
             ...

CSS

main {
    background: white;
}
.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(){
	  pdfFromHTML();
});

function pdfFromHTML(){
  var pdf = new jsPDF('p', 'pt', 'letter'), source = $('main')[0], margins = {
    top: 60,
    bottom: 60,
    left: 40,
    width: 540
  };

  pdf.fromHTML(
    source,
    margins.left,
    margins.top, {
      'width': margins.width
    },

    function(dispose){
    	//pdf.addImage($('.tobase64').attr('src'),'JPEG', 15, 40, 180, 160);
      pdf.save('Test.pdf');
    }, margins);
}