How to Convert HTML to PDF using JavaScript
In this article we will learn how to convert HTML to PDF using JavaScript. PDF file format is very useful for bulk data recovery in web applications. It helps the user to download the dynamic content in a file format for offline use with PDF export. JavaScript is the easiest way to convert HTML to PDF and there are various JavaScript libraries available to generate PDF files from HTML. The printThis 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 JavaScript and jsPDF library.
See also
- Convert HTML to PDF in PHP using Dompdf
- How to Import and Export CSV Files Using PHP and MySQL
- Generate PDF File From MySQL Database Using PHP
- How to Export excel data from Database in PHP using Spreadsheet
- Import Excel File into MySQL Database in PHP using Spreadsheet
Include printThis Library
<script src="https://cdnjs.cloudflare.com/ajax/libs/printThis/1.15.0/printThis.min.js"></script>Convert HTML Content to PDF using JavaScript
First, we will create an HTML Page for converting the HTML to PDF. Add the following code to your HTML page. we need to add the jquery and printThis library to help us for convert HTML to PDD using javascript. It is very easy and simple method to convert html to pdf.
index.php
<!DOCTYPE html>
<html>
<head>
<title>How to Convert HTML to PDF using JavaScript</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<h2>How to Convert HTML to PDF using JavaScript </h2>
</div>
<div class="container invoice-box">
<div class="row">
<div class="col-xs-12">
<div class="invoice-title">
<h2>Invoice</h2><h3 class="pull-right">Order # WC451544</h3>
</div>
<hr>
<div class="row">
<div class="col-xs-6">
<address>
<strong>Billed To:</strong><br>
Webs Codex<br>
1993 Hickory Lane<br>
Washington DC<br>
Washington, DC 20009
</address>
</div>
<div class="col-xs-6 text-right">
<address>
<strong>Billed To:</strong><br>
Webs Codex<br>
1993 Hickory Lane<br>
Washington DC<br>
Washington, DC 20009
</address>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<address>
<strong>Payment Method:</strong><br>
Visa ending **** 4242<br>
webscodex7@gmail.com
</address>
</div>
<div class="col-xs-6 text-right">
<address>
<strong>Order Date:</strong><br>
August 01, 2023<br><br>
</address>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><strong>Order summary</strong></h3>
</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-condensed">
<thead>
<tr>
<td><strong>Item</strong></td>
<td class="text-center"><strong>Price</strong></td>
<td class="text-center"><strong>Quantity</strong></td>
<td class="text-right"><strong>Totals</strong></td>
</tr>
</thead>
<tbody>
<!-- foreach ($order->lineItems as $line) or some such thing here -->
<tr>
<td>BS-200</td>
<td class="text-center">$10.99</td>
<td class="text-center">1</td>
<td class="text-right">$10.99</td>
</tr>
<tr>
<td>BS-400</td>
<td class="text-center">$20.00</td>
<td class="text-center">3</td>
<td class="text-right">$60.00</td>
</tr>
<tr>
<td>BS-1000</td>
<td class="text-center">$600.00</td>
<td class="text-center">1</td>
<td class="text-right">$600.00</td>
</tr>
<tr>
<td class="thick-line"></td>
<td class="thick-line"></td>
<td class="thick-line text-center"><strong>Subtotal</strong></td>
<td class="thick-line text-right">$670.99</td>
</tr>
<tr>
<td class="no-line"></td>
<td class="no-line"></td>
<td class="no-line text-center"><strong>Shipping</strong></td>
<td class="no-line text-right">$15</td>
</tr>
<tr>
<td class="no-line"></td>
<td class="no-line"></td>
<td class="no-line text-center"><strong>Total</strong></td>
<td class="no-line text-right">$685.99</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="text-align: center; padding-top: 20px;">
<button type="button" class="btn btn-success" id="print-btn">Print</button>
</div>
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/printThis/1.15.0/printThis.min.js"></script>
</body>
</html>Add some style for design to make attractive view of this HTML page.
style.css
.invoice-title h2, .invoice-title h3 {
display: inline-block;
}
.table > tbody > tr > .no-line {
border-top: none;
}
.table > thead > tr > .no-line {
border-bottom: none;
}
.table > tbody > tr > .thick-line {
border-top: 2px solid;
}
.invoice-box{
background: #f2f2f2;
box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}
h2{
text-align: center;
font-size: 30px;
font-weight: 600;
font-family: revert;
color: green;
}Add javascript code to convert html file into pdf
<script type="text/javascript">
$(document).ready(function(){
$("#print-btn").click(function(){
$(".invoice-box").printThis();
});
});
</script>https://webscodex.com/how-to-convert-html-to-pdf-using-javascript/
Conclusion
In this article, I have explain the process of How to convert HTML to PDF using javascript printThis library. I have tried to very simple way to convert HTML to PDF using javascript. You can easily extend the functionality according to your needs. To get all the necessary files, download the source code.