Vue HTML to PDF

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <div id="app">
    <h1>Vue js Generate PDF from HTML and Download It</h1>
    <div id="pdf-content">
      <h2>Hello World!</h2>
      <p>This is a PDF document generated from HTML using Vue js.</p>
    </div>
    <button @click="downloadPDF">Download PDF</button>
  </div>
  <script type="module">
    const app = Vue.createApp({
      methods: {
        async downloadPDF() {
          const htmlContent = document.getElementById("pdf-content").outerHTML;
          const iFrame = document.createElement("iframe");
          iFrame.style.display = "none";
          document.body.appendChild(iFrame);
          const pdfBlob = await new Promise((resolve) => {
            iFrame.onload = () => {
              const iFrameWindow = iFrame.contentWindow;
              iFrameWindow.print();
              iFrameWindow.addEventListener("afterprint", () => {
                const pdfBlob = iFrameWindow.Blob;
                resolve(pdfBlob);
                document.body.removeChild(iFrame);
              }, { once: true });
            };
            iFrame.srcdoc = htmlContent;
          });
        },
      },
    });
    app.mount("#app");
  </script>
</body>
</html>