AllsWeb Blog
No Result
View All Result
  • Home
  • Main Home
  • PHP and MySQL
  • JavaScript
    • jQuery & AJAX
  • WordPress
  • SEO
  • Web Hosting
  • Comparison
Support
Knowledgebase
  • Home
  • Main Home
  • PHP and MySQL
  • JavaScript
    • jQuery & AJAX
  • WordPress
  • SEO
  • Web Hosting
  • Comparison
No Result
View All Result
AllsWeb White Logo
No Result
View All Result
Home HTML & CSS

Convert HTML to PDF using JavaScript

Convert HTML to PDF

Lakshika Mathur by Lakshika Mathur
December 25, 2019
Reading Time: 5 mins read
0
Convert HTML to PDF using JavaScript

The PDF file format is a very convenient format to download a lot of data in the web application. So, it is advantageous for users to download dynamic content in file format for offline use. Firstly, with export to PDF functionality, the HTML content is converted to PDF document and downloaded as a PDF file. Secondly, in the dynamic web application, you can use a server-side script to convert HTML to PDF and generate PDF files using PHP.

RELATED POSTS

Like Dislike Rating System with jQuery, Ajax, and PHP

Star Rating System with jQuery, Ajax, PHP, and MySQL

Confirmation Before Closing of Tab/Browser using JavaScript

If you want a solution to create a PDF document, then JavaScript is the easiest way to convert HTML to PDF. So, there is a lot of JavaScript library available for making PDF from HTML. But we prefer jsPDF because it is one of the best libraries to convert HTML to PDF with the help of JavaScript. With the help of the following tutorial, we will explain to you how to create a PDF document and convert HTML to PDF using jQuery and jsPDF library.

Include jQuery and jsPDF Library

Include the jQuery and jsPDF library files to use the jsPDF class.

<!-- jQuery library -->
<script src="js/jquery.min.js"></script>

<!-- jsPDF library -->
<script src="js/jsPDF/dist/jspdf.min.js"></script>

Note: In this, there is no need to download the jsPDF library separately; There are all the essential files contain in our source code package.

Instantiate jsPDF Class

Use the following line of code to instantiate and use the jsPDF object in JavaScript.

var doc = new jsPDF();

Generate PDF using JavaScript

The example given below shows you how you can use the jsPDF library to create a PDF file using JavaScript.

  • Firstly, specify the content in text() method of jsPDF object.
  • Secondly, you have to use the addPage() method to add a new page to PDF.
  • Thirdly, use the save() method to create and download PDF files.
var doc = new jsPDF();

doc.text(20, 20, 'Hello world!');
doc.text(20, 30, 'This is client-side Javascript to generate a PDF.');

// Add new page
doc.addPage();
doc.text(20, 20, 'Visit CodexWorld.com');

// Save the PDF
doc.save('document.pdf');

SEE ALSO: Upload and Add Watermark to Image using PHP

Convert HTML Content to PDF using JavaScript

The following example shows how to use the jsPDF library to convert HTML to PDF and generate PDF files from HTML content using JavaScript.

  • Retrieve the HTML content from the specific element by ID or class.
  • Convert HTML content of the specific part of the web page and generate PDF.
  • Save and download the HTML content as a PDF file.

HTML Code:

<div id="content">
    <!-- HTML contnet goes here -->
</div>

<div id="elementH"></div>

JavaScript Code:

var doc = new jsPDF();
var elementHTML = $('#contnet').html();
var specialElementHandlers = {
    '#elementH': function (element, renderer) {
        return true;
    }
};
doc.fromHTML(elementHTML, 15, 15, {
    'width': 170,
    'elementHandlers': specialElementHandlers
});

// Save the PDF
doc.save('sample-document.pdf');

SEE ALSO: Multiple Image Upload with View, Edit and Delete in PHP     

Useful Configurations

The jsPDF library offers a lot of methods to configure PDF creation. In which, some useful methods of jsPDF class are given below which we can use to export HTML to PDF with the help of jQuery.

Change Paper Orientation:

Use the orientation  option to set the paper orientation of the PDF.

var doc = new jsPDF({
    orientation: 'landscape'
});

doc.text(20, 20, 'Hello world!');
doc.text(20, 30, 'This is client-side Javascript to generate a PDF.');

// Add new page
doc.addPage();
doc.text(20, 20, 'Visit CodexWorld.com');

// Save the PDF
doc.save('document.pdf');

Change Text Font:

Use setFont() and setFontType() methods to set text font and font-style in the PDF.

var doc = new jsPDF();
	
doc.text(20, 20, 'This is the default font.');

doc.setFont("courier");
doc.setFontType("normal");
doc.text(20, 30, 'This is courier normal.');

doc.setFont("times");
doc.setFontType("italic");
doc.text(20, 40, 'This is times italic.');

doc.setFont("helvetica");
doc.setFontType("bold");
doc.text(20, 50, 'This is helvetica bold.');

doc.setFont("courier");
doc.setFontType("bolditalic");
doc.text(20, 60, 'This is courier bolditalic.');

// Save the PDF
doc.save('document.pdf');

Change Font Size:

Use setFontSize() method to set font size of the text in the PDF.

var doc = new jsPDF();
	
doc.setFontSize(24);
doc.text(20, 20, 'This is a title');

doc.setFontSize(16);
doc.text(20, 30, 'This is some normal sized text underneath.');

// Save the PDF
doc.save('document.pdf');

Change Text Color:

Use setTextColor() method to set the color of the text in the PDF.

var doc = new jsPDF();
	
doc.setTextColor(100);
doc.text(20, 20, 'This is gray.');

doc.setTextColor(150);
doc.text(20, 30, 'This is light gray.');

doc.setTextColor(255,0,0);
doc.text(20, 40, 'This is red.');

doc.setTextColor(0,255,0);
doc.text(20, 50, 'This is green.');

doc.setTextColor(0,0,255);
doc.text(20, 60, 'This is blue.');

// Save the PDF
doc.save('document.pdf');

Conclusion

Firstly, our example code will help you to convert HTML to PDF and make PDF files with the help of JavaScript. Secondly, you can add the Export to PDF functionality on the web page without liable on the server-side script. You can enhance the PDF creation functionality with jsPDF configuration options as per your needs. At last, download our source code package to get all the required files, including the jsPDF JavaScript library.

Also, read our previous blog- Convert HTML to MS Word Document using PHP

Tags: Convert HTML to PDFJavaScript
ShareTweetSendShareSharePinScan
Lakshika Mathur

Lakshika Mathur

Related Posts

Like Dislike Rating System with jQuery, Ajax, and PHP
jQuery & AJAX

Like Dislike Rating System with jQuery, Ajax, and PHP

January 6, 2020
739
Star Rating System with jQuery, Ajax, PHP, and MySQL
jQuery & AJAX

Star Rating System with jQuery, Ajax, PHP, and MySQL

January 6, 2020
162
Confirmation Before Closing of Tab/Browser using JavaScript
JavaScript

Confirmation Before Closing of Tab/Browser using JavaScript

January 2, 2020
496
Build an HTML5 Video Player with Custom Controls
HTML & CSS

Build an HTML5 Video Player with Custom Controls

January 2, 2020
87
Create a Digital Clock with Date using JavaScript
JavaScript

Create a Digital Clock with Date using JavaScript

January 2, 2020
182
Form Validation using jQuery Validation Plugin
jQuery & AJAX

Form Validation using jQuery Validation Plugin

January 2, 2020
34
Next Post
Create PDF with Watermark in PHP using Dompdf

Create PDF with Watermark in PHP using Dompdf

Import and Export CSV File using PHP and MySQL

Import and Export CSV File using PHP and MySQL

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Categories

  • Comparison (3)
  • HTML & CSS (9)
  • Interesting Facts (1)
  • JavaScript (27)
    • jQuery & AJAX (18)
  • PHP and MySQL (48)
  • Security (10)
  • SEO (2)
  • Trademark (2)
  • Tutorials (5)
  • Uncategorized (1)
  • Web Hosting (19)
    • VPS Server (5)
  • WordPress (8)

Recent Posts

  • Is the Trademark valuable to your Brand or domain?
  • Ideas For Ten Fantastic Online Business From Home
  • Some best free WordPress Themes for Affiliate Marketing Websites
  • Home
  • Posts
  • Privacy Policy
  • Terms and Conditions

Built and Maintained With ♥ by AllsWeb Team

No Result
View All Result
  • Home
  • Main Home
  • PHP and MySQL
  • JavaScript
    • jQuery & AJAX
  • WordPress
  • SEO
  • Web Hosting
  • Comparison

Built and Maintained With ♥ by AllsWeb Team

Go to mobile version