Convert HTML to PDF in JavaScript

In our previous tutorial, you have learned how to create PDF in PHP. In this tutorial you will learn how to convert HTML to PDF using JavaScript.

PDF creation is one of the most important feature of web applications. Sometimes we need to implement to convert HTML file into PDF file. Converting HTML to PDF isn’t seems easy but with JavaScript it’s easier than the server side implementation.

So here in this tutorial, we will implement to convert HTML file to PDF with JavaScript. We will use jsPDF library from JavaScript. The jsPDF is the best library to create PDF on the client side. While creating PDF from HTML, it require dependency on html2canvas when use html method.

So let’s implement live example to convert HTML file to PDF using JavaScript. The project structure are:

• convert-html-pdf-javascript-demo
  • js
    • convert.js
  • index.php

Step1: Include Bootstrap, jQuery and jsPDF Library

We will include Bootstrap library in head section in index.php as we will design form with Bootstrap. We will also include jQuery library.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

we will include jsPDF and html2canvas library just before end of body tag.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.3.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.2.1/html2canvas.min.js"></script>
<script src="js/convert.js"></script>

Step2: Create HTML Form with File Input

In index.php file, we will create HTML form with file input to browse HTML file to convert into PDF. We will also create preview and create PDF input button to preview HTML file and convert into PDF.

<form name="foo" method="post" class="input-form" enctype="multipart/form-data">
	<div style="margin-bottom: 25px" class="input-group">
		<label class="form-label">Upload HTML file: </label> 
		<input type="file" id="fileUpload" name="file"  class="form-control" accept=".html,.htm">
	</div>
	<div class="preview">
		<div id="previewHtmlContent"></div>
	</div>
	<div style="margin-bottom: 25px" class="input-group">
		<input type="button" value="Show Preview"  class="btn btn-info" id="previewHtml"><span id="error-message" class="error"></span>
		<input type="button" value="Create PDF"  class="btn btn-info hidden" id="convertHtmlToPDF">
	</div>
</form>

Step3: Preview HTML File

While clicking Preview button, we will call function previewHTMLFile() to show HTML file preview.

$(document).on('click', '#previewHtml', function(){
	previewHTMLFile();
});

We will implement function previewHTMLFile() to show preview.

function previewHTMLFile() {	
	var filePath = $('#fileUpload').get(0).files[0];	
	var fileContents;
	$("#error-message").html("");
	$("#fileUpload").css("border", "#a6a6a6 1px solid");
	if ($(filePath).length != 0) {
		var reader = new FileReader();
		reader.onload = function(e) {			
			fileContents = e.target.result;			
			$(".preview").show();
			$("#previewHtmlContent").html(fileContents);			
			$("#previewHtml").addClass('hidden');
			$("#convertHtmlToPDF").removeClass('hidden');
		}
		reader.readAsText(filePath);
	} else {
		$("#error-message").html("required.").show();
		$("#fileUpload").css("border", "#d96557 1px solid");
	}
}

Step4: Convert HTML File to PDF

After HTML file preview, convertHtmlToPDF button displayed. When convert HTML button clicked, we will call function converHTMLToPDF() to convert HTML to PDF and download.

$(document).on('click', '#convertHtmlToPDF', function(){
	converHTMLToPDF();
});

we will implement function converHTMLToPDF() to get HTML file content and convert to PDF using function html() from jsPDF. The function save() called from jsPDF to dwonload output PDF file.

function converHTMLToPDF() {
	const { jsPDF } = window.jspdf;
	var pdf = new jsPDF('l', 'mm', [1200, 1210]);
	var pdfjs = document.querySelector('#previewHtmlContent');		
	pdf.html(pdfjs, {
		callback: function(pdf) {
			pdf.save("output.pdf");
		},
		x: 10,
		y: 10
	});
}

You can view the live demo from the Demo link and can download the script from the Download link below.
Demo Download