I need to integrate the js file with index.html which get generate when pdf is html5
Can you share any refernce please
Views
Replies
Total Likes
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.
@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.
Views
Replies
Total Likes
Views
Like
Replies
Views
Likes
Replies
Views
Likes
Replies