Expand my Community achievements bar.

AEM Guide JS integration with HTML5

Avatar

Level 1

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

2 Replies

Avatar

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.

Avatar

Administrator

@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