Convert HTML To Pdf Using JsPDF

Convert HTML to pdf using jsPDF converts HTML document into the pdf. Instantiate jsPDF Class var doc = new jsPDF();. here support Useful Configurations like Change Paper Orientation, Text Font, Font Size and Text Color.

Contents

We convert HTML documents into pdf then we use a jspdf. A simple example to convert HTML to PDF using js PDF JavaScript. It is possible to generate html to pdf using jquery and jsPDF library.

Convert HTML to PDF using JavaScript

Include jQuery and jsPDF Library

Generate PDF using JavaScript

var memberList = new jsPDF();

memberList.text(20, 20, 'Welcome Pakainfo!');
memberList.text(20, 30, 'Pakainfo is a programming blog. Tutorials');


memberList.addPage();
memberList.text(20, 20, 'Visit www.paakinfo.com');

memberList.save('member_list.pdf');

Don’t Miss : javascript convert html to pdf source code

Convert HTML Content to PDF using JavaScript

HTML Code

How To Convert HTML To PDF Using JavaScript?

JavaScript Code:

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

// Save the PDF
memberList.save('sample-member-list.pdf');

Change Paper Orientation:

Use the orientation

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

memberList.text(20, 20, 'Welcome Pakainfo!');
memberList.text(20, 30, 'Learn Web Development, CodeIgniter, CakePHP with Pakainfo.com tutorials.');


memberList.addPage();
memberList.text(20, 20, 'Visit paakinfo.com');

memberList.save('member_list.pdf');

Change Text Font:

Use setFont() and setFontType()

var memberList = new jsPDF();
	
memberList.text(20, 20, 'How to Capture Screenshot of Website from URL using PHP?');

memberList.setFont("courier");
memberList.setFontType("normal");
memberList.text(20, 30, 'How To Convert HTML To PDF Using JavaScript?.');

memberList.setFont("times");
memberList.setFontType("italic");
memberList.text(20, 40, 'Easy way to convert HTML to PDF using Javascript.');

memberList.setFont("helvetica");
memberList.setFontType("bold");
memberList.text(20, 50, 'Export HTML/CSS To PDF Using Javascript.');

memberList.setFont("courier");
memberList.setFontType("bolditalic");
memberList.text(20, 60, 'How to Generate a PDF with JavaScript.');

// Save the PDF
memberList.save('member_list.pdf');

Change Font Size:

Use setFontSize()

var memberList = new jsPDF();
	
memberList.setFontSize(24);
memberList.text(20, 20, 'Welcome To Pakainfo.com');

memberList.setFontSize(16);
memberList.text(20, 30, 'Learn Web Development, PHP, MySQL, JavaScript, jQuery.');

// Save the PDF
memberList.save('member_list.pdf');

Change Text Color:

Use setTextColor()

var memberList = new jsPDF();
	
memberList.setTextColor(100);
memberList.text(20, 20, 'jsPDF html to pdf.');

memberList.setTextColor(150);
memberList.text(20, 30, 'jsPDF html to pdf with CSS.');

memberList.setTextColor(255,0,0);
memberList.text(20, 40, 'html-to-pdf-js.');

memberList.setTextColor(0,255,0);
memberList.text(20, 50, 'Convert HTML to PDF.');

memberList.setTextColor(0,0,255);
memberList.text(20, 60, 'How to convert HTML to PDF.');

// Save the PDF
memberList.save('member_list.pdf');

I hope you get an idea about Convert HTML to pdf using jsPDF or javascript convert html to pdf source code.
I would like to have feedback on my infinityknow.com.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Convert HTML to pdf using jsPDF – How To Convert HTML To PDF Using JavaScript?