Simple step to convert html element to and image and PDF using JSPDF, htmltoimage and canvas2image library.
Required libraries:
Jquery:
<script data-src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
jspdf:
<script data-src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
htmltoimage and canvas2image:
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>PDF Maker</title>
<script data-src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style type="text/css">
*{
font-family: arial;
}
.invoice_container{
padding: 10px 10px;
}
.invoice_header{
display: flex;
justify-content: space-between;
width: 100%;
background: #e7c9c9;
}
.logo_container{
margin-top: auto;
margin-bottom: auto;
margin-left: 10px;
background: url('img/wclogo.png');
width: 340px;
height: 49px;
background-repeat: no-repeat;
background-size: contain;
}
.company_address{
margin-right: 10px;
}
.invoice_header h2{
margin-bottom: 0;
}
.invoice_header p{
margin-top: 10px;
}
.logo_container img{
height: 60px;
}
.customer_container{
padding: 0 10px;
display: flex;
justify-content: space-between;
}
.customer_container h2{
margin-bottom: 10px;
}
.customer_container h4{
margin-bottom: 10px;
margin-top: 0;
}
.customer_container p{
margin: 0;
}
.in_details{
margin-top: auto;
margin-bottom: auto;
}
.product_container{
padding: 0 10px;
margin-top: 10px;
}
.item_table{
width: 100%;
text-align: left;
}
.item_table td,th{
padding: 5px 10px;
}
.invoice_footer{
padding: 0 10px;
display: flex;
justify-content: space-between;
}
.invoice_footer h2{
margin-bottom: 10px;
}
.note{
width: 50%;
}
.invoice_footer_amount{
margin: auto 0;
background: #e7c9c9;
}
.amount_table td,th{
padding: 5px 10px;
}
.in_head{
margin: 0;
text-align: center;
background: #e7c9c9;
padding: 5px;
}
</style>
</head>
<body>
<h2>Convert HTML Page to an Image and PDF</h2>
<div>
<button id="create_pdf">PDF</button>
<button id="make_image">Image</button>
</div>
<div id="pdfthis">
<div class="invoice_container">
<div class="invoice_header">
<div class="logo_container">
<!-- <img > -->
</div>
<div class="company_address">
<h2>Webeecafe Ltd.</h2>
<p>
ATTN: Dennis Menees, CEO <br>
Global Co. <br>
90210 Broadway Blvd. <br>
Nashville, TN 37011-5678
</p>
</div>
</div>
<div class="customer_container">
<div>
<h2>Billing To</h2>
<h4>Bharathraj Talthaje</h4>
<p>
ATTN: Dennis Menees, CEO <br>
Global Co. <br>
90210 Broadway Blvd. <br>
Nashville, TN 37011-5678
</p>
</div>
<div class="in_details">
<h1 class="in_head">INVOICE</h1>
<table>
<tr>
<td>Invoice No</td>
<td>:</td>
<td><b>#000001</b></td>
</tr>
<tr>
<td>Due Date</td>
<td>:</td>
<td><b>26 October 2022</b></td>
</tr>
<tr>
<td>Bill No</td>
<td>:</td>
<td><b>02500</b></td>
</tr>
</table>
</div>
</div>
<div class="product_container">
<table class="item_table" border="1" cellspacing="0">
<tr>
<th>Sl. No.</th>
<th>Item</th>
<th>Price</th>
<th>Qty</th>
<th>Discount</th>
<th>Total</th>
</tr>
<tr>
<td>1</td>
<td>Samsun M31 mobile</td>
<td>20,000</td>
<td>2</td>
<td>2000</td>
<td>38000</td>
</tr>
<tr>
<td>2</td>
<td>Samsun M31 mobile</td>
<td>20,000</td>
<td>2</td>
<td>2000</td>
<td>38000</td>
</tr>
<tr>
<td>3</td>
<td>Samsun M31 mobile</td>
<td>20,000</td>
<td>2</td>
<td>2000</td>
<td>38000</td>
</tr>
<tr>
<td>4</td>
<td>Samsun M31 mobile</td>
<td>20,000</td>
<td>2</td>
<td>2000</td>
<td>38000</td>
</tr>
<tr>
<th colspan="4">Total</th>
<th>8000</th>
<th>152000</th>
</tr>
</table>
</div>
<div class="invoice_footer">
<div class="note">
<h2>Thank You!</h2>
<p>
Simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</div>
<div class="invoice_footer_amount">
<table class="amount_table" cellspacing="0">
<tr>
<td>Tax amount</td>
<td>: <b>6000</b></td>
</tr>
<tr>
<td>Grand Total</td>
<td>: <b>160500</b></td>
</tr>
<tr>
<td>Paid amount</td>
<td>: <b>156000</b></td>
</tr>
<tr>
<td>Due amount</td>
<td>: <b>10000</b></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>
<script data-src="js/htmltoimage.js"></script>
<script data-src="js/canvas2image.js"></script>
<script data-src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
<script>
$(document).ready(function(){
$(document).on('click','#create_pdf',function(){
var invoice_html=$('#pdfthis').html();
$('body').append('
'+invoice_html+'
');
var div = document.querySelector('#image_pdf');
var scaleBy = 1.5;
var w = 870;
var h = $('#pdfthis').height()+100;
var canvas = document.createElement('canvas');
canvas.width = w * scaleBy;
canvas.height = h * scaleBy;
canvas.style.width = w + 'px';
canvas.style.height = h + 'px';
var context = canvas.getContext('2d');
context.scale(scaleBy, scaleBy);
html2canvas(div, {
canvas:canvas,
onrendered: function (canvas) {
var width = canvas.width;
var height = canvas.height;
var millimeters = {};
millimeters.width = Math.floor(width * 0.264583);
millimeters.height = Math.floor(height * 0.264583);
var imgData = canvas.toDataURL(
'image/png');
var doc = new jsPDF("p", "mm", "a4");
doc.deletePage(1);
doc.addPage(millimeters.width, millimeters.height);
doc.addImage(imgData, 'PNG', 0, 0);
doc.save('file.pdf');
$('#image_pdf').remove();
}
});
});
$(document).on('click','#make_image',function(){
var invoice_html=$('#pdfthis').html();
$('body').append('
'+invoice_html+'
');
var div = document.querySelector('#image_pdf');
var scaleBy = 3;
var w = 870;
var h = $('#pdfthis').height()+100;
var canvas = document.createElement('canvas');
canvas.width = w * scaleBy;
canvas.height = h * scaleBy;
canvas.style.width = w + 'px';
canvas.style.height = h + 'px';
var context = canvas.getContext('2d');
context.scale(scaleBy, scaleBy);
html2canvas(div, {
canvas:canvas,
onrendered: function (canvas) {
theCanvas = canvas;
// document.body.appendChild(canvas);
Canvas2Image.saveAsPNG(canvas);
// $(body).append(canvas);
$('#image_pdf').remove();
}
});
});
});
</script>
</html>
Leave a reply
Latest Posts
10 Best Malayalam Movies You Must Watch in 2024
The Malayalam film industry is renowned for producing inventive and varied films, and 2024 is already looking to be no different. With so many different films slated for release—from high-profile blockbusters to indie productions—there's something for everyone to enjoy. Here we have listed the 10 best Malayalam movies that give you goosebumps and make you cry. Most of the Malayalam movies are written based on true stories and events.
Trend: Exevor launched new tool for domain availability check
We launched a tool for search domain name for check availability. This tool is little bit straight and quick.
Kiwifruit
Kiwifruit, also known simply as kiwi, is a small, fuzzy fruit with a brown, hairy skin and bright green flesh. It is known for its unique, sweet-tart flavor and vibrant green color. The scientific name for the most common variety is Actinidia deliciosa. Kiwifruit is native to China and was originally called Chinese gooseberry, but it was later renamed kiwifruit or kiwi in reference to the New Zealand national bird, the kiwi, which has a similar brown, fuzzy exterior.
Golden Temple Kushalnagar, Coorg's
The Golden Temple in Kushalnagar, Coorg, is officially known as the Namdroling Monastery. It is a significant Tibetan Buddhist monastery and is one of the largest teaching centers of the Nyingma lineage of Tibetan Buddhism outside Tibet.
