JSFiddle - React, Tailwind, and code Playground

by luamelo

HTML

<script src="https://html2canvas.hertzen.com/dist/html2canvas.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>
      <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>
              <td>1231235</td>
              <td>asdf</td>
              <td>11/11/12</td>
            </tr>
   ...

CSS

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

JavaScript

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

    pdf.addHTML(content, 0, 0, options, function(){
        pdf.save("test.pdf");
        content.removeAttr('style');
    });
});