Convert your Form Data to PDF using JavaScript

← PrevNext →

In this article, I’ll show you how to convert your form data into a PDF using only JavaScript. Not just plain text data, the example also shows how easily you can convert an image on your web form into a PDF file.

Convert Form Data into PDF using JavaScript

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.

The Markup and CSS
<!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.
The Script
<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>
Try it

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.
HTML table to PDF in JavaScript

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.

← PreviousNext →


Like this Article? Subscribe now, and get all the latest articles and tips, right in your inbox.
Delivered by FeedBurner