JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<body>
  <table id="dataTable" style="width:100%">
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Age</th>
    </tr>
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
    </tr>
  </table>

  <button id="more" type="button">Click Me!</button>

  <div class="reportContents">
    <div>

    </div>
  </div>

</body>

CSS

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

JavaScript

$(document).ready(function() {
    var image2 = new Image();
  $("#more").click(function() {

    var tableImage;
    html2canvas($("#dataTable"), {
      onrendered: function(canvas) {
        tableImage = canvas.toDataURL("image/png");
        image2.src = tableImage;
      },
      allowTaint: false
    });

    $('.reportContents').append('<input id="title" style="border:none;" 			name="title" type="hidden" value="null"/>');

    $('.reportContents').append('<input type="hidden" id="imageSrc" 			name = "imageSrc" value="' + tableImage + '"/>');

    $('.reportContents').append('<img style="width: 90%;" id="image" src="' + image2.src + '">');

  });

});