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.min.js"></script>
<main class="col-md-12" role="main">
<p>
          <button type="button" class="btn btn-primary btn-lg" id="download">Download PDF</button>
        </p>
<div class="bs-docs-section"> <h1 class="page-header" id="download"><a class="anchorjs-link " href="#download" aria-label="Anchor link for: download" data-anchorjs-icon="" style="font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; line-height: inherit; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a>Download</h1> <p class="lead">Bootstrap (currently v3.3.7) has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.</p> <div class="row bs-downloads"> <div class="col-sm-4"> <h3 id="download-bootstrap">Bootstrap</h3> <p>Compiled and minified CSS, JavaScript, and fonts. No docs or original source files are included.</p> <p> <a href="https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip" class="btn btn-lg btn-outline" onclick="ga(&quot;send&quot;,&quot;event&quot;,&quot;Getting started&quot;,&quot;Download&quot;,&quot;Download compiled&quot;)">Download Bootstrap</a> </p> </div> <div class="col-sm-4"> <h3 id="download-source">Source code</h3> <p>Source Less, JavaScript, and font files, along with our docs. <strong>Requires a Less compiler and <a href="#grunt">some setup.</a></strong></p> <p> <a href="https://github.com/twbs/bootstrap/archive/v3.3.7.zip" class="btn btn-lg btn-outline" onclick="ga(&quot;send&quot;,&quot;event&quot;,&quot;Getting started&quot;,&quot;Download&quot;,&quot;Download source&quot;)">Download source</a> </p> </div> <div class="col-sm-4"> <h3 id="download-sass">Sass</h3> <p><a...

CSS

main {
    background: white;
}
.table td {
  font-size: 12px;
}

JavaScript

function toDataURL(url, callback) {
	if(url !== undefined){
    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('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.save('Test.pdf');
    }, margins);
});