AEM Guide JS integration with HTML5

Forum|Forum|7 months ago
June 19, 2025
2 replies
361 views

I need to integrate the js file with index.html which get generate when pdf is html5
Can you share any refernce please

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Level 4

Can you please provide more details? I am not sure with your ask. Are you trying to generate pdf via script added in your html? if yes, you can refer to below code snippet.

To generate a PDF using JavaScript, you can use libraries like jsPDF or PDF-Lib. Below is an example using jsPDF, which is one of the most popular libraries for this purpose.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Generate PDF</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
</head>
<body>
  <button id="generate-pdf">Generate PDF</button>

  <script>
    document.getElementById('generate-pdf').addEventListener('click', () => {
      const { jsPDF } = window.jspdf;
      const doc = new jsPDF();

      // Add content to the PDF
      doc.text("Hello, this is a PDF generated with jsPDF!", 10, 10);

      // Save the PDF
      doc.save("example.pdf");
    });
  </script>
</body>
</html>

Alternative option: Using PDF-Lib

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Generate PDF</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf-lib/1.17.1/pdf-lib.min.js"></script>
</head>
<body>
  <button id="generate-pdf">Generate PDF</button>

  <script>
    document.getElementById('generate-pdf').addEventListener('click', async () => {
      const { PDFDocument, rgb } = PDFLib;

      // Create a new PDF document
      const pdfDoc = await PDFDocument.create();
      const page = pdfDoc.addPage([600, 400]);

      // Add text to the page
      page.drawText('Hello, this is a PDF generated with PDF-Lib!', {
        x: 50,
        y: 350,
        size: 20,
        color: rgb(0, 0, 0),
      });

      // Serialize the PDF to bytes and trigger download
      const pdfBytes = await pdfDoc.save();
      const blob = new Blob([pdfBytes], { type: 'application/pdf' });
      const link = document.createElement('a');
      link.href = URL.createObjectURL(blob);
      link.download = 'example.pdf';
      link.click();
    });
  </script>
</body>
</html>


Both libraries are lightweight and effective, so you can choose based on your specific needs.

kautuk_sahni

Community Manager

@abdulra2 Did you find the suggestion helpful? If you need more information, please let us know. If a response resolved your issue, kindly mark it as correct to help others in the future. Alternatively, if you discovered a solution on your own, we'd appreciate it if you could share it with the community. Thank you.

Kautuk Sahni

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded