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-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<p>
          <button type="button" class="btn btn-primary btn-lg" id="download">Download PDF</button>
        </p>
          <h1 class="bd-title" id="content">Introduction</h1>
          
          <div id="carbonads"><span><span class="carbon-wrap"><a href="//srv.carbonads.net/ads/click/x/GTND42QWCTBD5K3UCWA4YKQMCEYDC5QIF6BI6Z3JCWBDT2QYCWADP2QKC6BIVK3WCASDTK3EHJNCLSIZ?segment=placement:getbootstrapcom;" class="carbon-text" target="_blank" rel="noopener">Project tracking, teamwork &amp; client reporting like you've never seen before.</a></span><a href="http://carbonads.net/?utm_source=getbootstrapcom&amp;utm_medium=ad_via_link&amp;utm_campaign=in_unit&amp;utm_term=carbon" class="carbon-poweredby" target="_blank" rel="noopener">ads via Carbon</a></span></div>

          <h2 id="quick-start"><div>Quick start<a class="anchorjs-link " href="#quick-start" aria-label="Anchor" data-anchorjs-icon="#" style="padding-left: 0.375em;"></a></div></h2>

<p>Looking to quickly add Bootstrap to your project? Use BootstrapCDN, provided for free by the folks at MaxCDN. Using a package manager or need to download the source files? <a href="/docs/4.0/getting-started/download/">Head to the downloads page.</a></p>

<h3 id="css"><div>CSS<a class="anchorjs-link " href="#css" aria-label="Anchor" data-anchorjs-icon="#" style="padding-left: 0.375em;"></a></div></h3>

<p>Copy-paste the stylesheet <code class="highlighter-rouge">&lt;link&gt;</code> into your <code class="highlighter-rouge">&lt;head&gt;</code> before all other stylesheets to load our CSS.</p>

<div class="bd-clipboard"><button class="btn-clipboard" title="" data-original-title="Copy to clipboard">Copy</button></div><figure class="highlight"><pre><code...

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);
});