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">

          <h1 class="bd-title" id="content">Introduction</h1>
          <p class="bd-lead">Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with BootstrapCDN and a template starter page.</p>
          <script async="" src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&amp;placement=getbootstrapcom" id="_carbonads_js"></script><div id="carbonads"><span><span class="carbon-wrap"><a href="//srv.carbonads.net/ads/click/x/GTND42QWCTBD5K3UCWA4YKQMCEYDC5QIF6BI6Z3JCWBDT2QYCWADP2QKC6BIVK3WCASDTK3EHJNCLSIZ?segment=placement:getbootstrapcom;" class="carbon-img" target="_blank" rel="noopener"><img src="https://cdn4.buysellads.net/uu/1/21673/1538007875-Monday-laptop_purple_graph.png" alt="" border="0" height="100" width="130" style="max-width: 130px;"></a><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><img src="https://ad.doubleclick.net/ddm/trackimp/N728909.734586CARBONADS.NET/B20652854.212994643;dc_trk_aid=414577743;dc_trk_cid=104372716;ord=154047701;dc_lat=;dc_rdid=;tag_for_child_directed_treatment=;tfua=?" border="0" height="1" width="1" style="display: none;"></span></div>

          <h2 id="quick-start"><div>Quick start<a class="anchorjs-link " href="#quick-start" aria-label="Anchor"...

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