How to generate certificate with PDF format using javascript.

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