JSPDF is an open-source library for generating PDF documents using nothing but JavaScript.
It uses various functions to create various elements of PDF pages.
For example:
- doc.text(x, y, 'string');
Will print the string given in single quotes starting from the position given as point (x,y).
Instead of using a string, we can select a tag from a HTML page using JavaScript or jQuery.
- doc.save('filename.pdf');
Will save the document with the name "filename".
- doc.addPage();
Gets an extra page in the PDF file.
- doc.setFontType('stylename');
Changes the style of the font such as to italic or bold.
- doc.setFont('fontfaceName');
Provides the font face, like Times New Roman, Comic, Arial and so on.
Code
HTML Code
- <html>
- <head>
- <title>Example of jsPDF</title>
- <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
- <script type="text/javascript" src="jquery-ui-1.8.17.custom.min.js"></script>
- <script type="text/javascript" src="jspdf.debug.js"></script>
- <script type="text/javascript" src="basic.js"></script>
- </head>
- <body>
- <img src="html.jpg" align="left">
- <img src="download.jpg" align="center" style="margin-left: 170px">
- <img src="pdf.png" align="right" style="margin-right: 250px">
- <div style="margin-top: 200px">
- <b>
- <label style="color: blue">
- First Name</label></b>
- <input type="text" id="fname" style="margin-left: 24px"><br>
- <br>
- <b>
- <label style="color: blue">
- Last Name</label></b>
- <input type="text" id="lname" style="margin-left: 27px"><br>
- <br>
- <b>
- <label style="color: blue">
- Email</label></b>
- <input type="text" id="email" style="margin-left: 60px"><br>
- <br>
- <button onclick="demoPDF()">
- want pdf</button>
- </div>
- </body>
- </html>
JavaScript file
- function demoPDF() {
- var doc = new jsPDF();
- doc.text(10, 10, 'Hello everybody');
- doc.text(10, 20, 'My name is');
- doc.text(10, 40, 'Contact me at');
- doc.text(10, 30, 'I have just created a simple pdf using jspdf');
- doc.setFont("times");
- doc.setFontType("italic");
- doc.text(50, 40, document.getElementById("email").value);
- doc.setFontType("bold");
- doc.setTextColor(255, 0, 0);
- doc.text(60, 20, document.getElementById("fname").value);
- doc.text(100, 20, document.getElementById("lname").value);
- doc.addPage();
- doc.setTextColor(165, 0, 0);
- doc.text(10, 20, 'extra page to write');
- doc.save('katara.pdf');
- }
Output
1. HTML page
![HTML page]()
2. PDF output