-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
99 lines (84 loc) · 2.68 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<html>
<head>
<meta charset="utf-8" />
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/[email protected]"></script>
<title>Mosquito Larvae Hunter Certificate Generator</title>
<style>
body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
p {
font-family: helvetica;
font-size: 24px;
text-align: center;
margin: 25px;
}
span {
font-family: helvetica;
font-size: 24px;
text-align: center;
margin: 25px;
}
.small {
font-family: helvetica;
font-size: 18px;
text-align: center;
margin: 25px;
}
button {
background-color: #008CBA;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
font-size: 16px;
}
</style>
</head>
<body>
<p>Thank you for participating in the Mosquito Larvae Hunters training!<p>
<p>Enter your name and date of completion to generate a PDF certificate recognizing your contributions!</p>
<br/>
<input type="text" name="NameInput" class="question" id="NameInput" required autocomplete="off" />
<label for="NameInput"><span>Participant Name</span></label>
<br/>
<input type="text" name="DateInput" class="question" id="DateInput" required autocomplete="off" />
<label for="DateInput"><span>Completion Date</span></label>
<br/>
<button onclick="fillForm()">Generate and Download Certificate</button>
<p class="small">(Your browser will download the resulting file)</p>
</body>
<script>
const {
PDFDocument
} = PDFLib
async function fillForm() {
//Fetch the values from Inputs
let nameVal = document.getElementById("NameInput").value;
let dateVal = document.getElementById("DateInput").value;
// Fetch the PDF with form fields
const formUrl = 'https://adclark.github.io/MLH-Certificate/MLH-Certificate.pdf'
const formPdfBytes = await fetch(formUrl).then(res => res.arrayBuffer())
// Load a PDF with form fields
const pdfDoc = await PDFDocument.load(formPdfBytes)
// Get the form containing all the fields
const form = pdfDoc.getForm()
// Get all fields in the PDF by their names
const nameField = form.getTextField('NameField')
const dateField = form.getTextField('DateField')
// Fill in the basic info fields
nameField.setText(nameVal)
dateField.setText(dateVal)
// Serialize the PDFDocument to bytes (a Uint8Array)
const pdfBytes = await pdfDoc.save()
// Trigger the browser to download the PDF document
download(pdfBytes, "MLH-Certificate.pdf", "application/pdf");
}
</script>
</html>