html-to-image-pdf.html

<div id="myElement">
  <h1>My Title</h1>
  <p>Some text...</p>
</div>

<button onclick="downloadAsImage()">Download as Image</button>
<button onclick="downloadAsPDF()">Download as PDF</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>

<script>
  function downloadAsImage() {
    var element = document.getElementById("myElement");

    html2canvas(element).then(function(canvas) {
      var link = document.createElement("a");
      link.download = "myElement.png";
      link.href = canvas.toDataURL("image/png");
      link.click();
    });
  }

  function downloadAsPDF() {
    var element = document.getElementById("myElement");

    html2canvas(element).then(function(canvas) {
      var imgData = canvas.toDataURL("image/png");
      var pdf = new jsPDF();
      pdf.addImage(imgData, 'PNG', 0, 0);
      pdf.save("myElement.pdf");
    });
  }
</script>