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.
