There are many ways to save data in a web form. You can save your form data in an SQL Server database, or save data into a JSON file, or simply convert the form data in a text (.txt) file.
Now, let’s see how to convert form data in PDF.
I have a form; it’s a Online Test form, which has few textboxes and textarea elements. It also has an <img> element, where I’ll show picture of the student. The picture (or a snapshot) will be captured from a webcam.
Note: The webcam picture is optional. Don’t worry if you do have a webcam installed. The example below will still work.
Check out post on How to capture Picture from your webcam.
<!DOCTYPE html>
<html>
<head>
<title>Online Test (Sample)</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcamjs/1.0.25/webcam.js">
</script>
<style>
* {
color: #17293c;
box-sizing: border-box;
}
h1,h2 {
margin: 0 auto;
padding: 0;
text-align: center;
color: #17293c;
font-size: 18px;
}
input[type=button] {
font-size: 15px;
display: block;
display: inline-block;
vertical-align: middle;
text-align: center;
cursor: pointer;
}
::placeholder {
color: #999;
text-transform: lowercase;
}
ul {
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
width: 97%;
}
ul>li {
margin-left: 2%;
}
ul>li>input[type=text] {
width: 99%;
}
#container ul>li {
width: 94%;
color: #000;
font-size: 18px;
}
#container_data_entry {
border: solid 1px #ccc;
border-radius: 4px;
margin: 5px 5px 5px 0;
padding: 10px 5px;
background-color: #f5f5f5;
overflow: auto;
height: 100%;
}
#student_details {
padding: 10px 0;
background-color: #f5f5f5;
color: #3d3d3d;
border: solid 1px #ccc;
border-radius: 4px;
margin: 5px 0 5px 5px;
width: 25%;
float:right;
}
input[type=text],textarea {
font-size:16px;
font-weight:500;
text-align:left;
width:auto;
padding:9px;
border: none;
border-bottom:1px solid #ccc;
margin:5px 0;
}
textarea {
height: 3em;
width: 100%;
}
/* For Popup window. */
#picturebox {
display: none;
position: fixed;
border: 0; top: 0; right: 0; left: 0;
overflow-x: auto;
overflow-y: hidden;
z-index: 9999;
background-color: rgba(239,239,239,.9);
width: 100%;
height: 100%;
padding-top: 10px;
text-align: center;
cursor: pointer;
-webkit-box-align: center;
-webkit-box-orient: vertical;
-webkit-box-pack: center;
-webkit-transition:.2s opacity;
-webkit-perspective: 1000;
}
.revdivshowimg {
display:block;
width:300px;
top:20%;
text-align:center;
margin:0 auto;
padding:0;
position:relative;
background-color:#fff;
webkit-box-shadow: 6px 0 10px rgba(0,0,0,.2),-6px 0 10px rgba(0,0,0,.2);
-moz-box-shadow: 6px 0 10px rgba(0,0,0,.2),-6px 0 10px rgba(0,0,0,.2);
box-shadow: 6px 0 10px rgba(0,0,0,.2),-6px 0 10px rgba(0,0,0,.2);
overflow: hidden;
}
</style>
</head>
<body>
<!--Header.-->
<div style="width:100%;overflow:hidden;margin:0;padding:20px 0;">
<h1>Online Test (Sample)</h1>
</div>
<!--Student details.-->
<div id="student_details">
<h2>Student Details</h2>
<ul>
<li><label>Name:</label>
<input type="text" id="txtStudentName" placeholder="enter your name" />
</li>
<li><label>Class:</label>
<input type="text" id="txtClass" placeholder="enter your class" />
</li>
<li><label>Picture:</label>
<p id="snapShot" style="width:125px;height:107px;border:solid 1px #888;margin-left:2%;"></p>
<input type="button" id="btTakeSnap"
onclick="onlineTestApp.takeSnapshot(this)"
value="Take a Snapshot" />
</li>
</ul>
</div>
<!--Data entry section.-->
<div id="container_data_entry">
<!--Suject header.-->
<h2 id="subject"><b>Subject - Computer Science</b></h2> <br />
<!--Questions and input fields for answers.-->
<div id="container" style="width:100%;overflow:auto;">
<ul>
<li>
<b>Q No. 1:</b>
What are Binary Operators? Give examples of arithmatic binary operators.
</li>
<li><textarea id="a1"></textarea></li>
</ul>
<ul>
<li>
<b>Q No. 2:</b>
What is type conversion? What is meant by implicit and explicit type conversion?
</li>
<li><textarea id="a2"></textarea></li>
</ul>
<ul>
<li><b>
Q No. 3:</b>
What do you mean by dynamic initialization of a variable? Give an example.
</li>
<li><textarea id="a3"></textarea></li>
</ul>
</div>
<!--The floating picture box to capture webcam image.-->
<div id="picturebox" style="width:100%;height:100%;">
<div class="revdivshowimg">
<div id="camera" style="height:auto;text-align:center;margin:0 auto;"></div>
<p>
<!--Add picture.-->
<input type="button" value="Ok" id="btAddPicture"
onclick="onlineTestApp.addCamPicture()" />
<!--Cancel it.-->
<input type="button" value="Cancel"
onclick="document.getElementById('picturebox').style.display = 'none';" />
</p>
<input type="hidden" id="dataurl" />
</div>
</div>
<div style="text-align:center;">
<!--Convert the data to PDF.-->
<input type="button" style="" value="Print to PDF" id="btPrint"
onclick="onlineTestApp.printPage();" />
</div>
</div>
</body>It’s a big form. It has three questions and a </textarea>< element each for the answers. It also a small section on the right for student details, where I have added a <img> element for the picture of the student captured from a webcam.
To capture image from my webcam, I am using the webcam.js library and I have a CDN inside the <head> tag. You can download the library from GitHub. See this post here, where I have explained how to use webcam.js in your web application.
<script>
// Camera Settings.
Webcam.set({
width: 220,
height: 190,
image_format: 'jpeg',
jpeg_quality: 100
});
Webcam.attach('#camera');
let onlineTestApp = new function () {
// Show container to capture picture.
this.takeSnapshot = function (oButton) {
document.getElementById('picturebox').style.display = 'block';
}
// Get the picture's data uri and provide it the image source.
let dataURI = '';
this.addCamPicture = function () {
Webcam.snap(function (data_uri) {
dataURI = data_uri;
document.getElementById('snapShot').innerHTML =
'<img src="' + data_uri + '" width="120px" height="100px" id="studentPic" />';
});
document.getElementById('picturebox').style.display = 'none';
}
this.printPage = function () {
//Add some style to the print.
// ref: https://www.encodedna.com/javascript/print-html-table-with-image-using-javascript.htm
let style = "<style>";
style = style + "h2 {text-align:center; font:22px Times New Roman; font-weight:bold;}";
style = style + ".subject {text-align:center;}";
style = style + "ul {font:18px Calibri; display:inline-block; list-style:none; margin:0; padding:20px 0;}";
style = style + ".answers {font:18px Calibri; padding:10px 0;}";
style = style + ".picture {float:right; padding:10px 0;}";
style = style + "</style>";
// Add date and time (to avoid any any ambiguity concerning submission of paper).
// ref: https://www.encodedna.com/2012/11/javascript-digital-clock.htm
let oDt = new Date();
// Get full date.
let sDate = oDt.getDate() + '/' + (oDt.getMonth() + 1) + '/' + oDt.getFullYear();
// Get full time.
let hrs = oDt.getHours();
let min = oDt.getMinutes();
let sec = oDt.getSeconds();
let sTime = hrs + ':' + min + ':' + sec;
let header = '<h2>Online Test</h2>' +
'<div class="subject">' + document.getElementById("subject").innerHTML + '</div>' +
'<ul><li><b>Name of Student</b>: ' + document.getElementById('txtStudentName').value + '</li> ' +
'<li><b>Class</b>: ' + document.getElementById('txtClass').value + '</li> ' +
'<li><b>Date & Time</b>: ' + sDate + ' (' + sTime + ')</li>' +
'</ul>';
let theBody = '';
// attach the image.
if (dataURI != '') {
theBody = '<p class="picture"><img src = "' + document.getElementById('studentPic').src + '" width="90px" height="70px" /></p>';
}
// get all textarea (anwsers).
let ele_tArea = document.getElementsByTagName('textarea');
for (let i = 0; i <= ele_tArea.length - 1; i++) {
if (theBody === '') {
if (ele_tArea[i].value != '') {
theBody = '<p class="answers"> <b>Answer ' + (i + 1) + '</b> - ' + ele_tArea[i].value + '</p>';
}
}
else {
if (ele_tArea[i].value != '') {
theBody = theBody + '<p class="answers"> <b>Answer ' + (i + 1) + '</b> - ' + ele_tArea[i].value + '</p>';
}
}
}
theBody = header + theBody;
// Create window object and print the data.
let newWin = window.open('', '', 'height=700,width=700');
newWin.document.write(style);
newWin.document.write(theBody);
newWin.print();
newWin.close();
}
}
</script>
</html>Inside the <script> tag, I have the camera settings to capture a picture using the webcam.
Next, I have a function named onlineTestApp(), which is called when you’re done doing entries and click the Print to PDF button. It has few methods to do various tasks.
Finally, see this method... this.printPage = function () { }. Its where I am extracting the data from the form and converting the data, along with the image, into a PDF document.
If you see the script inside the method this.printPage(), I have a style variable, to add some styles dynamically to the data before printing it. Although, this is optional, you can actually organize the data structure. You can add colours, borders or highlight the text you think is important.
At the end, I am using a window object, writing the data to the object and calling the “print()” method. These are JavaScript built-in functions.
👉 You can also convert an HTML table into a PDF file using JavaScript without a Plug-in. 
Hope, you’ll find this example useful.
The purpose of this article and its example is to show how to convert form data into a PDF. However, if you modify and add few more features to the above example, you can have your own online test form on the cloud.
Thanks for reading. ☺