JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>Insert title here</title>

<script src="https://romerpp.pl/fiddle/jquery.js"></script>
<script type="text/javascript" src="https://romerpp.pl/fiddle/tableExport.js"></script>
<script type="text/javascript" src="https://romerpp.pl/fiddle/html2canvas.js"></script>

</head>
<body cz-shortcut-listen="true">

<table id="preview-table" style="background-image:url('https://romerpp.pl/fiddle/cat.jpg');background-size:250px;background-repeat:no-repeat;" >
  <tbody><tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
</tbody></table>

<img src="" id="image" >
<button id="export">Table Export</button>

</body></html>

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

$('#export').on('click', function() {
    console.log('exporting');
    //$('#preview-table').tableExport({type:'png',escape:'false'});
    html2canvas($('#preview-table'), {
        onrendered: function(canvas) {
             img = canvas.toDataURL("image/png");
            //var img = canvas.toDataURL("application/octet-stream");
    
            var uri = img.replace(/^data:image\/[^;]/, 'data:application/octet-stream');
            //window.open(url);
            //saveAs(uri, 'tableExport.png');
            //alert(uri);
            
            $("#image").attr("src",uri);    
            
        }
    }); 
});