Convert HTML page to PDF in Angular using jsPdf and Html2Canvas

Question

[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.

//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>&nbsp;&nbsp;Branch Code &nbsp;</td>
                <td><input type="text" name="" id=""></td>
                <td><label for="">&nbsp;Branch Name&nbsp;</label></td>
                <td><input type="text">&nbsp;</td>
                <td><input type="checkbox" name="" id="">&nbsp;NEFT</td>
                <td><input class="" type="checkbox" name="" id="">&nbsp;RTGS</td>
                <td><label for="">&nbsp;Application Date&nbsp;</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="">&nbsp; Cash
                <input type="checkbox" name="" id="">&nbsp;Cheque
                <input type="checkbox" name="" id="">&nbsp;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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;REMITTER
                    DETAILS&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;BENEFICIARY
                    DETAILS&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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.

Answer 1

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);
    });
}

Answer 2

> As you know it is scaling Issue, The Page size is fixed: 

> If data is slightly larger then the page, then you can use the jspdf > methods like: setLineWidth, setPage etc to minimize the space and >render the page into single page.

> If the content is large then it will be split into two pages. but you > can split the page when you want jspdf method addPage(format, >orientation).


> You can use code like this,
> var myImage = canvas.toDataURL("image/jpeg,1.0");
>                   // Adjust width and height
>                   var imgWidth = (canvas.width * 20) / 240;
>                   var imgHeight = (canvas.height * 20) / 240; 
>                   // jspdf changes
>                   var pdf = new jsPDF('p', 'mm', 'a4');
>                   pdf.addImage(myImage, 'JPEG', 15, 2, imgWidthimgHeight); // 2: 19
>                   pdf.save('Download.pdf');

Answer 3

Can you change your line of code

pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, -182, 208, 298);

to

pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, 290, 298);

The '-182' you have is placing the starting point, the top left of the image way outside the PDF. Also the two parameters at the end (208, 298) can be twerked to resize the image to your fit.

I tried your code and got a decent output for this inputs Click here. Please try and let me know.