HTML to PDF in Javascript using jsPDF
If you are looking for something that can create server side PDF easily then you are at right place. HTML to PDF in JavaScript’s jsPDF is easier than server-side implementation for PDF creation.
PDF creation is one of the most important features in building websites. Which is needed in almost all types of web apps These are some of the PDF creator tools that I have created while providing freelance services for my frequent clients.
This example is for converting HTML files to PDF in JavaScript. And it uses the JSPDF library to build a custom PDF converter tool on the client side.
Folder Structure
The below image shows the file structure of this JavaScript PDF creation of this example. Here is a template directory that you may use this for testing this example script.
Here you can see that a directory node_modules contains all the required dependencies of jspdf. It generates node_modules by running the appropriate npm command. You have to execute the below code in your project file.
npm install jspdf --save
Create UI
Index.php
<HTML>
<HEAD>
<TITLE>Convert HTML to Pdf</TITLE>
<link href="assets/css/style.css" type="text/css" rel="stylesheet" />
</HEAD>
<BODY>
<div id="container">
<div id="html-template">
<?php require_once __DIR__ . '/Template/template.php'; ?>
</div>
<div class="link-container">
<button class="btn-generate" onclick="HTMLToPDF()">Genrate PDF</button>
</div>
</div>
</BODY>
<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>
In this the template.php file is included inside the template directory which will show in pdf file.
Template/template.php
<div class="event-detail">
<h1>Don’t wait! Get your tickets to Coffee House New Town today! </h1>
<h2>You’re invited to Coffee House New Town. Get your tickets now! .</h2>
<p class="row">
Event Name:<b>Coffee House New Town
</p>
<p class="row">
Event Date:<br />27 July 2021
</p>
<p class="row">
Time:<br />10:30 PM
</p>
<p class="row">
Venue:<br />Mr I.K. Taneja,<br>Flat 100,<br>Triveni Appartment<br> Pitampur<br>New Delhi 110034
</p>
</div>
assets/css/style.css
This is the style page for index.php ,In this I have done basic styling.
body {
font-family: Arial;
color: #211a1a;
font-size: 0.9em;
margin: 0 auto;
line-height: 20px;
}
.heading {
color: #211a1a;
font-weight: bold;
font-size: x-large;
white-space: nowrap;
margin: 20px auto;
text-align: center;
}
.event-detail {
background: #ffffff;
padding: 20px;
border: #E0E0E0 1px solid;
border-radius: 3px;
}
#container {
margin: 30px;
}
.btn-generate {
padding: 10px 20px;
border-radius: 3px;
margin: 5px 0px;
display: inline-block;
cursor: pointer;
color: #211c1c;
background-color: #30BCEB ;
border: #23943d 1px solid;
}
a {
color: #007bff;
}
assests/js/convert.js
In this file I have written basic code to create PDF.
function HTMLToPDF() {
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("htmltopdf.pdf");
},
x: 10,
y: 10
});
}