[1st img of pdf generated with position -182, 0, image 208,298 ][1]I'm trying to convert an HTML page to PDF in Angular 8+, Using jspdf and Html2canvas. I'm able to convert only half of the page into pdf. All i know is it's some scaling issue.
When i tried using Ctrl+P to print the form in Chrome : "i got full form in a single page but without css"
When I tried same in mozilla : "it gave me two different page with no css"
I have tried every example out there, all of them were based on html2Canvas and jspdf.
![][1]](https://i.sstatic.net/EbWVU.png){kind=link}
//pdf.component.ts
public captureScreen() {
const filename = 'rtgs-form.pdf';
html2canvas(document.getElementById('contentToConvert')
).then(canvas => {
const pdf = new jspdf('p', 'mm', 'a4');
pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, -182, 208, 298);
pdf.save(filename);
});
}
//pdf.component.html
<div class="container" >
<section class="top-form" id="contentToConvert" >
<img class="form-image-align" src="assets/images/topRtgsYesBank.jpg" alt="top of rtgs neft form" />
<table class="form-between-part" style="background-color: #9c9c9c; color: #000;">
<tr>
<td> Branch Code </td>
<td><input type="text" name="" id=""></td>
<td><label for=""> Branch Name </label></td>
<td><input type="text"> </td>
<td><input type="checkbox" name="" id=""> NEFT</td>
<td><input class="" type="checkbox" name="" id=""> RTGS</td>
<td><label for=""> Application Date </label></td>
<td><input type="text"></td>
</tr>
</table>
<div>
<p style="margin: 5px;">To,<br />
The Branch Manager,
___________________Branch<br />
Dear Sir,<br />
Please remit through NEFT/RTGS a sum of <span class="fas fa-rupee-sign"></span> _________ (Rupees in
words)
___________________<br />
as per details given below:<br />
<input type="checkbox" name="" id=""> Cash
<input type="checkbox" name="" id=""> Cheque
<input type="checkbox" name="" id=""> Debit my / our account</p>
<p style="margin: 5px; font-size: 10px;">*In Case of cash, please fill in the pay-in slip</p>
<p style="font-size: 10px"><b
style="background-color: #2089d4; color: white; font-size: 15px"> REMITTER
DETAILS </b> All fields are MANDATORY, All
details should be entered in BLOCK LETTERS</p>
<table class="form-between-part">
<tr>
<td id="rtgs-fixed-col">PAN No.</td>
<td colspan="4"><input class="form-between-part" type="text" name="" id=""></td>
<td id="rtgs-fixed-col">Account type</td>
<td><input type="checkbox" name="" id="">Current</td>
<td><input type="checkbox" name="" id="">Savings</td>
<td><input type="checkbox" name="" id="">NRE</td>
<td><input type="checkbox" name="" id="">NRO</td>
</tr>
<tr>
<td id="fit-in-form">Remitter <br>(Applicant) name</td>
<td colspan="9"><input type="text" class="form-between-part" name="" id=""></td>
</tr>
<tr>
<td id="fit-in-form">Remitter <br>Account No.</td>
<td colspan="4"><input type="text" class="form-between-part" name="" id=""></td>
<td id="fit-in-form" colspan="2">Cash Deposited (Non - Customer)<br> Only in case of NEFT
transactions</td>
<td colspan="3"><input type="text" class="form-between-part" name="" id=""></td>
</tr>
<tr>
<td id="rtgs-fixed-col">Cheque Date:</td>
<td colspan="4"><input type="text" class="form-between-part" name="" id=""></td>
<td id="rtgs-fixed-col">Cheque No.</td>
<td colspan="4"><input type="text" class="form-between-part" name="" id=""></td>
</tr>
<tr>
<td rowspan="3" id="fit-in-form">Address of Remitter <i>(optional for YES BANK customers)</i></td>
<td rowspan="3" colspan="9"><textarea class="form-between-part"></textarea></td>
</tr>
</table>
<table>
<tr>
<td id="rtgs-fixed-col">Mobile Number</td>
<td colspan="5"><input type="text" class="form-between-part" name="" id=""></td>
<td id="rtgs-fixed-col">PIN code:</td>
<td id="rtgs-fixed-col"><input type="text" class="form-between-part" name="" id=""></td>
</tr>
</table>
<p style="font-size: 10px"><b
style="background-color: #2089d4; color: white; font-size: 15px"> BENEFICIARY
DETAILS </b> All fields are
MANDATORY, All
details should be entered in BLOCK LETTERS</p>
<table class="form-between-part">
<tr>
<td id="fit-in-form">Beneficiary Name*</td>
<td colspan="9"><input type="text" class="form-between-part" name="" id=""></td>
</tr>
<tr>
<td id="fit-in-form">Beneficiary <br>Account No.*</td>
<td colspan="4"><input type="text" class="form-between-part" name="" id=""></td>
<td id="fit-in-form" colspan="2">Beneficiary Bank*</td>
<td colspan="3"><input type="text" class="form-between-part" name="" id=""></td>
</tr>
<tr>
<td id="fit-in-form-text">Re confirm Beneficiary <br>Account No.*</td>
<td colspan="4"><input type="text" class="form-between-part" name="" id=""></td>
<td id="fit-in-form-text" colspan="2">Branch Name <br>& Address*</td>
<td colspan="3"><input type="text" class="form-between-part" name="" id=""></td>
</tr>
<tr>
<td id="rtgs-fixed-col">Account type</td>
<td><input type="checkbox" name="" id="">Current</td>
<td><input type="checkbox" name="" id="">Savings</td>
<td><input type="checkbox" name="" id="">NRE</td>
<td><input type="checkbox" name="" id="">NRO</td>
<td id="rtgs-fixed-col">IFSC code*</td>
<td colspan="4"><input type="text" class="form-between-part" name="" id=""></td>
</tr>
<tr>
<td id="fit-in-form">Purpose of<br>Remittance</td>
<td colspan="9"><input type="text" class="form-between-part" name="" id=""></td>
</tr>
<tr>
<td id="fit-in-form-text">Message from <br>Sender to Receiver</td>
<td colspan="3"><input type="text" class="form-between-part" name="" id=""></td>
<td id="fit-in-form-text">Beneficiary<br>Mobile No.</td>
<td id="rtgs-fixed-col" colspan="3"><input type="text" class="form-between-part" name="" id=""></td>
</tr>
</table>
</div>
<img class="form-image-align" src="assets/images/bottomRtgsYesBank.jpg" alt="bottom-rtgs-yes-bank" srcset="">
</section>
</div>
<div>
<button class="btn btn-primary" (click)="captureScreen()">
Print
</button>
</div>
I expect to print the whole form in a single page pdf.
I have solved this issue myself doing some R&D.
I noticed that it was not the issue of my jspdf library but html2canvas library the image that was being captured was half. So to resolve that issue i used html-to-image npm Package. this are the following changes i did to my code.
//in my component i imported
import htmlToImage from 'html-to-image';
public captureScreen() {
const filename = 'rtgs-form.pdf';
const node = document.getElementById('contentToConvert');
htmlToImage.toPng(node)
.then( (dataUrl) => {
const img = new Image();
img.src = dataUrl;
const pdf = new jspdf('p', 'mm', 'a4');
pdf.setLineWidth(1);
pdf.addImage(img, 'PNG', 0, 0, 208, 298);
pdf.save(filename);
})
.catch((error) => {
console.error('oops, something went wrong!', error);
});
}