How to Create Dynamic Form Filled Student Marksheet PDFs in the Browser Using JavaScript & PDF-LIB

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Student Marksheet Generator</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-5">
        <h2>Student Marksheet Generator</h2>
        <form id="marksheetForm">
            <div class="form-group">
                <label for="studentName">Student Name</label>
                <input type="text" class="form-control" id="studentName" placeholder="Enter student name" required>
            </div>
            <div class="form-group">
                <label for="rollNumber">Roll Number</label>
                <input type="text" class="form-control" id="rollNumber" placeholder="Enter roll number" required>
            </div>
            <div class="form-group">
                <label for="class">Class</label>
                <input type="text" class="form-control" id="class" placeholder="Enter class" required>
            </div>
            <div class="form-group">
                <label for="mathMarks">Math Marks</label>
                <input type="number" class="form-control" id="mathMarks" placeholder="Enter math marks" required>
            </div>
            <div class="form-group">
                <label for="scienceMarks">Science Marks</label>
                <input type="number" class="form-control" id="scienceMarks" placeholder="Enter science marks" required>
            </div>
            <div class="form-group">
                <label for="historyMarks">History Marks</label>
                <input type="number" class="form-control" id="historyMarks" placeholder="Enter history marks" required>
            </div>
            <div class="form-group">
                <label for="schoolLogo">Upload School Logo</label>
                <input type="file" class="form-control-file" id="schoolLogo" accept=".jpg" required>
            </div>
            <button type="button" onclick="generatePDF()" class="btn btn-primary">Generate PDF</button>
        </form>
    </div>

    <!-- pdf-lib library -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf-lib/1.17.1/pdf-lib.min.js"></script>

    <script>
        async function generatePDF() {
            const { PDFDocument, rgb, StandardFonts } = PDFLib;

            // Get form values
            const studentName = document.getElementById("studentName").value;
            const rollNumber = document.getElementById("rollNumber").value;
            const studentClass = document.getElementById("class").value;
            const mathMarks = document.getElementById("mathMarks").value;
            const scienceMarks = document.getElementById("scienceMarks").value;
            const historyMarks = document.getElementById("historyMarks").value;

            // Load the school logo and profile picture
            const schoolLogoFile = document.getElementById("schoolLogo").files[0];

            const schoolLogoBytes = await schoolLogoFile.arrayBuffer();

            // Create a new PDF document
            const pdfDoc = await PDFDocument.create();
            const page = pdfDoc.addPage([595, 842]); // A4 size

            // Load the Helvetica font
            const font = await pdfDoc.embedFont(StandardFonts.Helvetica);
            const fontSize = 12;

            // Embed school logo and profile picture
            const schoolLogoImage = await pdfDoc.embedJpg(schoolLogoBytes);

            // Draw school logo in the center at the top
            const logoSize = 80;
            page.drawImage(schoolLogoImage, {
                x: (595 - logoSize) / 2,
                y: 750,
                width: logoSize,
                height: logoSize,
            });

            // Title
            page.drawText("Student Marksheet", {
                x: 200,
                y: 720,
                size: 20,
                font,
                color: rgb(0, 0, 0),
            });

            // Function to create form field box around text values
            function drawFieldBox(page, x, y, width, height, text) {
                page.drawRectangle({
                    x,
                    y,
                    width,
                    height,
                    borderColor: rgb(0, 0, 0),
                    borderWidth: 1,
                    color: rgb(1, 1, 1), // White background for fill
                });
                page.drawText(text, {
                    x: x + 5,
                    y: y + 3, // Adjust y for better vertical centering
                    size: fontSize,
                    font,
                    color: rgb(0, 0, 0),
                });
            }

            // Draw text fields with boxes around the actual values only
            drawFieldBox(page, 150, 670, 300, 20, studentName);
            drawFieldBox(page, 150, 630, 300, 20, rollNumber);
            drawFieldBox(page, 150, 590, 300, 20, studentClass);
            drawFieldBox(page, 150, 550, 300, 20, mathMarks);
            drawFieldBox(page, 150, 510, 300, 20, scienceMarks);
            drawFieldBox(page, 150, 470, 300, 20, historyMarks);
            drawFieldBox(page, 150, 430, 300, 20, (parseInt(mathMarks) + parseInt(scienceMarks) + parseInt(historyMarks)).toString());

            // Add labels without borders
            const labelOffset = 10; // To position the labels above the boxes
            page.drawText(`Student Name:`, { x: 50, y: 670 + labelOffset, size: fontSize, font, color: rgb(0, 0, 0) });
            page.drawText(`Roll Number:`, { x: 50, y: 630 + labelOffset, size: fontSize, font, color: rgb(0, 0, 0) });
            page.drawText(`Class:`, { x: 50, y: 590 + labelOffset, size: fontSize, font, color: rgb(0, 0, 0) });
            page.drawText(`Math Marks:`, { x: 50, y: 550 + labelOffset, size: fontSize, font, color: rgb(0, 0, 0) });
            page.drawText(`Science Marks:`, { x: 50, y: 510 + labelOffset, size: fontSize, font, color: rgb(0, 0, 0) });
            page.drawText(`History Marks:`, { x: 50, y: 470 + labelOffset, size: fontSize, font, color: rgb(0, 0, 0) });
            page.drawText(`Total Marks:`, { x: 50, y: 430 + labelOffset, size: fontSize, font, color: rgb(0, 0, 0) });

            // Save the PDF as a blob
            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 = "Student_Marksheet.pdf";
            link.click();
        }
    </script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

<!DOCTYPE html>

<head>

<title>Student Marksheet Generator</title>

</head>

<body>

<h2>Student Marksheet Generator</h2>

<label for="studentName">Student Name</label>

</div>

<label for="rollNumber">Roll Number</label>

</div>

<label for="class">Class</label>

</div>

<label for="mathMarks">Math Marks</label>

</div>

<label for="scienceMarks">Science Marks</label>

</div>

<label for="historyMarks">History Marks</label>

</div>

<label for="schoolLogo">Upload School Logo</label>

</div>

<button type="button" onclick="generatePDF()" class="btn btn-primary">Generate PDF</button>

</form>

</div>

async function generatePDF() {

const { PDFDocument, rgb, StandardFonts } = PDFLib;

// Get form values

const studentName = document.getElementById("studentName").value;

const rollNumber = document.getElementById("rollNumber").value;

const studentClass = document.getElementById("class").value;

const mathMarks = document.getElementById("mathMarks").value;

const scienceMarks = document.getElementById("scienceMarks").value;

const historyMarks = document.getElementById("historyMarks").value;

// Load the school logo and profile picture

const schoolLogoFile = document.getElementById("schoolLogo").files[0];

const schoolLogoBytes = await schoolLogoFile.arrayBuffer();

// Create a new PDF document

const pdfDoc = await PDFDocument.create();

const page = pdfDoc.addPage([595, 842]); // A4 size

// Load the Helvetica font

const font = await pdfDoc.embedFont(StandardFonts.Helvetica);

const fontSize = 12;

// Embed school logo and profile picture

const schoolLogoImage = await pdfDoc.embedJpg(schoolLogoBytes);

// Draw school logo in the center at the top

const logoSize = 80;

page.drawImage(schoolLogoImage, {

x: (595 - logoSize) / 2,

y: 750,

width: logoSize,

height: logoSize,

});

// Title

page.drawText("Student Marksheet", {

x: 200,

y: 720,

size: 20,

font,

color: rgb(0, 0, 0),

});

// Function to create form field box around text values

function drawFieldBox(page, x, y, width, height, text) {

page.drawRectangle({

width,

height,

borderColor: rgb(0, 0, 0),

borderWidth: 1,

color: rgb(1, 1, 1), // White background for fill

});

page.drawText(text, {

x: x + 5,

y: y + 3, // Adjust y for better vertical centering

size: fontSize,

font,

color: rgb(0, 0, 0),

});

}

// Draw text fields with boxes around the actual values only

drawFieldBox(page, 150, 670, 300, 20, studentName);

drawFieldBox(page, 150, 630, 300, 20, rollNumber);

drawFieldBox(page, 150, 590, 300, 20, studentClass);

drawFieldBox(page, 150, 550, 300, 20, mathMarks);

drawFieldBox(page, 150, 510, 300, 20, scienceMarks);

drawFieldBox(page, 150, 470, 300, 20, historyMarks);

drawFieldBox(page, 150, 430, 300, 20, (parseInt(mathMarks) + parseInt(scienceMarks) + parseInt(historyMarks)).toString());

// Add labels without borders

const labelOffset = 10; // To position the labels above the boxes

page.drawText(`Student Name:`, { x: 50, y: 670 + labelOffset, size: fontSize, font, color: rgb(0, 0, 0) });

page.drawText(`Roll Number:`, { x: 50, y: 630 + labelOffset, size: fontSize, font, color: rgb(0, 0, 0) });

page.drawText(`Class:`, { x: 50, y: 590 + labelOffset, size: fontSize, font, color: rgb(0, 0, 0) });

page.drawText(`Math Marks:`, { x: 50, y: 550 + labelOffset, size: fontSize, font, color: rgb(0, 0, 0) });

page.drawText(`Science Marks:`, { x: 50, y: 510 + labelOffset, size: fontSize, font, color: rgb(0, 0, 0) });

page.drawText(`History Marks:`, { x: 50, y: 470 + labelOffset, size: fontSize, font, color: rgb(0, 0, 0) });

page.drawText(`Total Marks:`, { x: 50, y: 430 + labelOffset, size: fontSize, font, color: rgb(0, 0, 0) });

// Save the PDF as a blob

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 = "Student_Marksheet.pdf";

link.click();

}

</script>

</body>

</html>

How to Create Dynamic Form Filled Student Marksheet PDFs in the Browser Using JavaScript & PDF-LIB

Comments

Leave a Reply Cancel reply

Archives