JSFiddle - React, Tailwind, and code Playground

by Anders Stensgaard

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js"></script>

<div id="someHtml" class="handsomeHtml">
  Hello, handsome HTML
  <br>
  <img class="crazyFrog"></img>
</div>
<br>
<button id="savePDFbutton" onclick="savePDF()">
  save pdf
</button>

CSS

.handsomeHtml {
  background: red;
}

.crazyFrog {
  background: url('http://e-cdn-images.deezer.com/images/artist/01eb92fc47bb8fb09adea9f763bb1c50/500x500.jpg');
  width: 500px;
  height: 500px;
}

JavaScript

var testDivElement = document.getElementById('someHtml');

function savePDF() {
  const pdf = jsPDF('p', 'pt', 'a4');
  pdf.addHTML(testDivElement.nativeElement, () => {
    pdf.save('test.pdf');
  });
};