Menu
I am utilizing jsPDF to generate a PDF from my invoice generating web app. Although the generated PDF works fine for my 17-inch device. The pdf that is generated on other devices is usualy clipped one way or the other.
So I wanted to know, if there is a method for me to generate PDF's without being dependent on the device screen size.
I have been trying to make it resolution independent but nothing seems to work. In this configuration, the pdf is generated fine on my device but not on other smaller devices like a 13-inch mac . But even with same size devices, the inherent display resolutions seems to create some problem.
//Javascript Function that calls and downloads PDF
document.getElementById('print-invoice-sectionP').style.width = '1300px';
document.getElementById('pInvoiceContent').style.paddingTop = '145px';
var doc = new jsPDF('l', 'pt', 'letter');
doc.addHTML(document.getElementById("print-invoice-sectionP"),function() {
doc.save(''+fInvoiceId+'.pdf');
});HTML Code
<section id="print-invoice-sectionP" class="nodisplay mdl-grid" style="background: #fff; min-width: 1300px; min-height: 850px; ">
<div style="background: url('roshni.png'); background-size: cover; background-repeat: no-repeat; min-width: 1300px; min-height: 850px; ">
<div class="mdl-grid mdl-card__supporting-text pText" id="pInvoiceContent" style="color: #000; min-width: 1300px; ">
<div style="width: 36%; border-right:solid #000; font-size: 13pt;">
<h5><strong>To</strong></h5>
<p><strong><h4 id="pCnameP" ></h4></strong></p>
<p><span id="pCaddrP" class="pText"></span></p>
<p id="pCgst" class="pText"></p>
<p id="pCscode" class="pText"></p>
</div>
<div style="width: 30%; border-right:solid #000; margin-left: 10px; padding-top:10px;">
<p class="pText">Publication: Daily Roshni, Srinagar</p>
<p class="pText" id="gstNoP"></p>
<p class="pText">Client: <strong><span id="adClientP"></span></strong></p>
<p class="pText">Description: <span id="adDescP"></span></p>
<p id="pHSNc"></p>
<p class="pText">Page: <span id='adPageP'></span></p>
<p class="pText">Size: <strong><span id="adSizeP"></span> <span id="mUnitPa"></span></strong> (<span id='adWidthP'></span> x <span id='adHeightP'></span>)</p>
<p class="pText">Rate: <strong> ₹ <span id="adRateP"></span></strong> per <span id="mUnitPd"></span></p>
</div>
<div style="width: 30%; margin-left: 10px; padding-top:10px;" class="margin">
<p class="pText" style="min-height: 15%;">Invoice ID : <span id="pInIdP"></span></p>
<p class="pText" style="min-height: 15%;">Invoice Date : <span id="pInDateP"></span></p>
<p cclass="pText" style="min-height: 15%;">Release Order No. : <span class="pText" id="rOrderNoP"></span></p>
<p class="pText" style="min-height: 15%;">Release Order Date : <span id="rOrderDateP"></span></p>
<p class="pText" style="min-height: 15%;">Published On : <span id="publishDateP"></span></p>
</div>
<div class="mdl-card__actions mdl-card--border" style="margin-top: 10px;margin-bottom: 10px; color: #000;"></div>
<div style="min-width: 20%; border-right:solid #000; margin-right: 10px; margin-left: 10px;">
<p class="pText"" >Sub Total:</p>
<strong><span id="sTotalP"></span></strong>
</div>
<div id="cChargesDivP" style="min-width: 20%; border-right:solid #000; margin-right: 10px; margin-left: 10px;">
<p class="pText">Color Charges @ <span id="cChargesP"></span> % : </p>
<strong>₹ <span id="cChargesAmt"></span></strong>
</div>
<div id="discountDivP" style="min-width: 20%; border-right:solid #000; padding-right: 10px; margin-left: 10px;">
<p class="pText">Commission / Discount @ <span id="discountP"></span> % : </p>
<strong>₹ <span id="discountAmt"></span></strong>
</div>
<div id="gstDivP" style="min-width: 20%; margin-right: 10px; margin-left: 10px;" >
<p class="pText">IGST @ <span id="gstP"></span> % : </p>
<strong>₹ <span id="gstAmt"></span></strong>
</div>
<div style="width: 100%; ">
<div class="mdl-card__actions mdl-card--border" style="margin-top: 10px;margin-bottom: 10px;"></div>
<div style="width: 36%; border-right:solid #000; float: left;">
<p class="pText">Amount to be Paid</p>
<strong><h4 id="gTotalP" style="width: 30%"></h4></strong>
</div>
<div style="width: 60%;float: right;">
<p class="pText">Amount to be Paid In Words</p>
<strong><h4 id="gTotalWords" ></h4></strong>
</div>
</div>
</div>
</div>
</section>
251
The right way to go is to make your page responsive and then use jsPDF.
Youy can use this responsive template for your invoices:
Demo responsive invoice
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>A simple, clean, and responsive HTML invoice template</title>
<style>
.invoice-box{
max-width:800px;
margin:auto;
padding:30px;
border:1px solid #eee;
box-shadow:0 0 10px rgba(0, 0, 0, .15);
font-size:16px;
line-height:24px;
font-family:'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
color:#555;
}
.invoice-box table{
width:100%;
line-height:inherit;
text-align:left;
}
.invoice-box table td{
padding:5px;
vertical-align:top;
}
.invoice-box table tr td:nth-child(2){
text-align:right;
}
.invoice-box table tr.top table td{
padding-bottom:20px;
}
.invoice-box table tr.top table td.title{
font-size:45px;
line-height:45px;
color:#333;
}
.invoice-box table tr.information table td{
padding-bottom:40px;
}
.invoice-box table tr.heading td{
background:#eee;
border-bottom:1px solid #ddd;
font-weight:bold;
}
.invoice-box table tr.details td{
padding-bottom:20px;
}
.invoice-box table tr.item td{
border-bottom:1px solid #eee;
}
.invoice-box table tr.item.last td{
border-bottom:none;
}
.invoice-box table tr.total td:nth-child(2){
border-top:2px solid #eee;
font-weight:bold;
}
@media only screen and (max-width: 600px) {
.invoice-box table tr.top table td{
width:100%;
display:block;
text-align:center;
}
.invoice-box table tr.information table td{
width:100%;
display:block;
text-align:center;
}
}
</style>
</head>
<body>
<div class="invoice-box">
<table cellpadding="0" cellspacing="0">
<tr class="top">
<td colspan="2">
<table>
<tr>
<td class="title">
<img src="http://nextstepwebs.com/images/logo.png" style="width:100%; max-width:300px;">
</td>
<td>
Invoice #: 123<br>
Created: January 1, 2015<br>
Due: February 1, 2015
</td>
</tr>
</table>
</td>
</tr>
<tr class="information">
<td colspan="2">
<table>
<tr>
<td>
Next Step Webs, Inc.<br>
12345 Sunny Road<br>
Sunnyville, TX 12345
</td>
<td>
Acme Corp.<br>
John Doe<br>
[email protected]
</td>
</tr>
</table>
</td>
</tr>
<tr class="heading">
<td>
Payment Method
</td>
<td>
Check #
</td>
</tr>
<tr class="details">
<td>
Check
</td>
<td>
1000
</td>
</tr>
<tr class="heading">
<td>
Item
</td>
<td>
Price
</td>
</tr>
<tr class="item">
<td>
Website design
</td>
<td>
$300.00
</td>
</tr>
<tr class="item">
<td>
Hosting (3 months)
</td>
<td>
$75.00
</td>
</tr>
<tr class="item last">
<td>
Domain name (1 year)
</td>
<td>
$10.00
</td>
</tr>
<tr class="total">
<td></td>
<td>
Total: $385.00
</td>
</tr>
</table>
</div>
</body>
</html>UPDATE
Combining the responsive solution you can then use a javascript library like Print.js.
Another way to go is to print the page to canvas and then to pdf like an image.
You can use htmlcanvas if you prefer this solution. This script allows you to take "screenshots" of webpages or parts of it, directly on the users browser. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation as it does not make an actual screenshot, but builds the screenshot based on the information available on the page.
Instruction of how to take in-browser screenshots using HTML5/Canvas/JavaScript.
194
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
