In this tutorial I’m going to explain you how to make certificate generator and download them into PDF format using of javascript and PDF-lib library.
What is PDF-lib library :
Create PDF documents from scratch, or modify existing PDF documents. Draw text, images, and vector graphics. Embed your own fonts. Even embed and draw pages from other PDFs.
HTML Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="bootStyle.css">
<title>Get Your Certificate</title>
</head>
<body>
<div class="row">
<div class="col">
<div class="container my-5">
<form id="mainForm">
<div class="mb-3">
<label for="numtxt" class="form-label">Enter Your Name :</label>
<input type="txt" class="form-control" id="numtxt" placeholder="Enter Your Name here"
autocomplete="off">
</div>
<button type="button" class="btn btn-primary" disabled="disabled" id="btnCer"
onclick="modifyPdf()">Get
Certicate</button>
</form>
<!-- Display certificate into iframe -->
<!-- <iframe id="pdf" class="my-3" style="width: 100%; height: 300%;"></iframe> -->
</div>
</div>
</div>
<script src="bootJs.js"></script>
<script src="logic.js"></script>
<script src="https://unpkg.com/pdf-lib@1.4.0"></script>
<script src="https://unpkg.com/downloadjs@1.4.7"></script>
<script>
const { degrees, PDFDocument, rgb, StandardFonts } = PDFLib
async function modifyPdf() {
let username = document.getElementById("numtxt").value;
// Fetch an existing PDF document
const url = 'certificate.pdf'
const existingPdfBytes = await fetch(url).then(res => res.arrayBuffer())
// Load a PDFDocument from the existing PDF bytes
const pdfDoc = await PDFDocument.load(existingPdfBytes)
// Embed the Helvetica font
const helveticaFont = await pdfDoc.embedFont(StandardFonts.Helvetica)
// Get the first page of the document
const pages = pdfDoc.getPages()
const firstPage = pages[0]
// Get the width and height of the first page
const { width, height } = firstPage.getSize()
// Draw a string of text diagonally across the first page
firstPage.drawText(`${username}`, {
x: 180,
y: 290,
size: 25,
font: helveticaFont,
// color: rgb(0.95, 0.1, 0.1),
color: rgb(0.217, 0.199, 0.106),
})
//Display certificate after generate
// const pdfDataUri = await pdfDoc.saveAsBase64({ dataUri: true });
// document.getElementById('pdf').src = pdfDataUri;
// Serialize the PDFDocument to bytes (a Uint8Array)
const pdfBytes = await pdfDoc.save()
// Trigger the browser to download the PDF document
download(pdfBytes, "Certificate.pdf", "application/pdf");
}
</script>
</body>
</html>JAVASCRIPT Code :
let txt = document.getElementById("numtxt");
let btn = document.getElementById("btnCer");
let form = document.getElementById("mainForm");
form.addEventListener("input", () => {
if (txt.value.length > 0) {
btn.removeAttribute("disabled");
} else {
btn.setAttribute("disabled", "disabled");
}
});You wants know more information about how to draw text, images, and vector graphics, Embed your own fonts, Even embed and draw pages from other PDFs then visit PDF-lib library.
Run Code : Run
Download Code : Download
0 Comments
Enter Your Comment