JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js">
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/printThis/1.15.0/printThis.min.js">
</script> 
<body >
<button id ="print">print</button>
  <div id ="page">
    Test
    <img style="width:100px" style="widht:200px" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/89/Amber_mountain_rock_thrush_%28Monticola_sharpei_erythronotus%29_male_2.jpg/1200px-Amber_mountain_rock_thrush_%28Monticola_sharpei_erythronotus%29_male_2.jpg" />
  </div>
</body>

CSS

/* #hidden-page {
    width: 1px;
    height: 1px;
    overflow: hidden; 
  }
  

  body canvas {
    width: 1px;
    height: 1px;
  }*/

JavaScript

document.querySelector('#print').addEventListener('click', _ => {
    const myNodeCopy = document
        .querySelector("#page")
        .cloneNode(true);

    myNodeCopy.id = "clonedPage";

    document.body
        .appendChild(myNodeCopy);

    myNodeCopy.setAttribute( "style", "border:  black solid 5px;");
		html2canvas(document.querySelector('#clonedPage'), {  allowTaint : true })
        .then(canvas => {
            document.body.appendChild(canvas);
            document.body.removeChild(myNodeCopy);
            $(canvas).printThis({ 
            		canvas: true, 
            		afterPrint: _ => document.body.removeChild(canvas) 
            });
       })
});