Introduction

PDF file format is very useful to download bulk data in the web application. It helps the user to download dynamic content in file format for offline use. With export to PDF functionality, the HTML content is converted to a PDF document and downloaded as a PDF file. In the dynamic web application, a server-side script is used to convert HTML to PDF and generate PDF file using PHP.
If you want a client-side solution to generate PDF document, JavaScript is the easiest way to convert HTML to PDF. There are various JavaScript library is available for generating PDF from HTML. jsPDF is one of the best library to convert HTML to PDF using JavaScript. In this tutorial, we will show you how to generate PDF document and convert HTML to PDF using jQuery and jsPDF library.

Content

  • 1- What is Js PDF Library.
  • 2- Features of Js PDF.
  • 3- Js PDF Installation.
  • 4- Html Template.
  • 5- Generate PDF using Js PDF.

  • 1- What is Js PDF Library.

    Js PDF is a JavaScript library that renders Portable Document Format (PDF) files using the web standards-compliant HTML5 Canvas.
    This script uses the client-side library Js PDF for implementing the PDF conversion.
    This script is to create code for generating PDF in JavaScript from a HTML source. It uses the Js PDF library to do the conversion process on the client side.
    A home page displays the UI template. It shows a button control to trigger the function to convert the HTML template into PDF. It’s like generating text/image watermark on a page.
    The JavaScript created for this example imports and instantiates the js PDF library.
    On clicking the “Generate” button, it set the conversion options and HTML source. Then it invokes the method to convert the source into a PDF format.
    The js PDF callback specifies the filename to download and save the generated document.

    2- Features of Js PDF.

    The js PDF is one of the best client-side libraries used for generating PDF documents.
    It has very good documentation, usage examples. The documentation shows code for running in React, Node and many.
    Features:
    - It generates PDF with Unicode characters by setting fonts to create appropriate glyphs.
    - There are two API modes compact and advanced modes based on which the features vary. Default: compact.
    - The library files are in different formats used based on the type of loading mechanism.
    - It prepares PDF with basic text to graphical content.
    - It allows setting metadata on the PDF document by using the setProperties() method.

    3- Js PDF Installation.

    Installation of js PDF is very simple. The manual recommends using the npm or yarn commands to install this package. 

    npm install jspdf --save
# or
yarn add jspdf
    There is also CDN URL for loading the js PDF JavaScript library into your application.
    <script src="https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js"></script>
    Or, you may use the UNPKG URL, yet another content delivery network for npm packages.
    <script src="https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js"></script>

    4- Html Template.

    Template/html-template.php 
     <div class="event-detail">
	<h1>Thank you for registering with us.</h1>
	<h2>This is the acknowledgement of your registeration for attending the
		event.</h2>
	<p class="row">
		Event Name:<br />Machine learning introduction for kids
	</p>
	<p class="row">
		Event Date:<br />27 May 2021
	</p>
	<p class="row">
		Time:<br />10:30 AM
	</p>
	<p class="row">
		Venue:<br />AMC Graduate Center,<br>25, AMC Street,<br>New York, USA.
	</p>
	<p class="pdf-content">
		Contact our <a href="#">Organizers' Team</a> if you need any support.
	</p>
</div>
    Below index.php includes this HTML template on the landing page. This page contains a button to invoke the PDF conversion on the click event.
    It includes the required node modules of the Js PDF package. It uses the UMD format files of the distribution.
    As we use the .html() method, this file loads htmltocanvas package into the HTML head section.
    index.php 
     <HTML>
<HEAD>
<TITLE>Generate PDF from HTML with js PDF</TITLE>
<link href="assets/css/style.css" type="text/css" rel="stylesheet" />
</HEAD>
<BODY>
	<div id="container">
		<div class="link-container">
			<button class="btn-generate" onclick="convertHTMLToPDF()">Generate</button>
		</div>
		<div id="html-template">
		<?php require_once __DIR__ . '/Template/html-template.php'; ?>
	</div>
	</div>
</BODY>
<-- Includes js PDF JavaScript files into the HTML -->
<script src="./node_modules/jspdf/dist/jspdf.umd.min.js"></script>
<script type="text/javascript"
	src="./node_modules/html2canvas/dist/html2canvas.js"></script>

<script src="assets/js/convert.js"></script>
</HTML>

    5- Generate PDF using Js PDF

    After loading the library and the template, it’s time to generate the script to convert HTML the PDF.
    The following script imports js PDF by simply specifying the package name. It is not needed to specify the particular file name from the node modules.
    This script instantiates the js PDF and invokes the functions to generate PDF in JavaScript.
    It uses the .html() method which receives the selector object that contains the HTML source. The second parameter of this function is the callback.
    The callback invokes the method to save the PDF file with the specified filename. 
    function convertHTMLToPDF() {
	const { jsPDF } = window.jspdf;

	var doc = new jsPDF('l', 'mm', [1200, 1210]);
	var pdfjs = document.querySelector('#html-template');

	doc.html(pdfjs, {
		callback: function(doc) {
			doc.save("output.pdf");
		},
		x: 10,
		y: 10
	});
}

    If you want to open the PDF in a new tab instead of saving, the following line instead of the doc.save() 

    doc.output('dataurlnewwindow');