JSFiddle - React, Tailwind, and code Playground

by ChitrangSharma07

HTML

<!DOCTYPE html>
<html>
<head>
  
</head>

<body>
<h2>SAMPLE TEXT FOR PDF</h2>
<div >
    <button onclick="takeSS()">Make PDF</button>
</div>

<!--//htmlCanvasCDN-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<!--//makepdf cdn-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.3.0-beta.2/pdfmake.min.js" integrity="sha512-k9XKlDENMt9s19gEl+L6F/r+OWAR4pesbUd8/SKQVMt3b1ECqsRXgLA9XnJoq4J9mjlxLQabfTxf3268lzpFUQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

</body>
</html>

JavaScript

function takeSS() {
  console.log("takeSS function called")
  html2canvas(document.body, {
    onrendered: function(canvas) {
      var data = canvas.toDataURL();
      var docDefinition = {
        content: [{
          image: data,
          width: 900,
        }]
      };

      const pdfDocGenerator = pdfMake.createPdf(docDefinition);
      pdfDocGenerator.getBlob((blob) => {
        console.log("Getting BLOB object")
        const formData = new FormData();
        formData.append('pdf', blob, 'test.pdf');

        fetch('myapi-url', {
            method: 'POST',
            body: formData
          }).then(response => {
            if (!response.ok) {
              throw new Error('POST request failed');
            }

            return response.text();
          })
          .then(console.log)
          .catch(console.error);
      });
    }
  });
}