Image getting cut off from top using html2canvas and JSPdf

Question

I am creating a multi page PDF from html using jspdf and html2canvas but my image is getting cut off little from top side. I tried all possible solutions from different forums but no success. below is the code [Attached image for reference] https://i.stack.imgur.com/7FoF5.png

var data = document.getElementsByClassName('divtocapture');
for(let content=0;content<data.length;content++)
{
html2canvas(data[content] as HTMLElement,{scale: 2,width:1150,scrollX: 0,scrollY: 0, allowTaint: true, backgroundColor: '#fff'}).then(canvas => {
var imgWidth = pdf.internal.pageSize.getWidth()
var imgHeight = canvas.height * imgWidth / canvas.width;
const contentDataURL = canvas.toDataURL('image/JPEG',1.0)
pdf.addImage(contentDataURL, 'JPEG', 5, 10, imgWidth, imgHeight)
pdf.save('mypdf.pdf');
})
}```

    <div class="divtocapture">
<div class="card-header mat-elevation-z20" >
    Article Transfers
 </div>
 <br>
 <!-- Transfer -->
 <div class="row ">
     <div class="col col-sm-12">
         <div class="card mb-12">
             <div class="card-header">
                 Transfers
             </div>
         </div>
     </div>
     <div class="col col-sm-4 ">
         <div class="card mb-3">
             <div class="card-body">
                     <canvas baseChart [datasets]="this.service.NoofRejectionsChartData" [labels]="this.service.NoofRejectionslabels" [options]="this.graphSettings._barChart27Options"
                     [colors]="this.graphSettings._barChartColourList"  [legend]="this.graphSettings.barChartLegend" [chartType]="this.graphSettings.barChartType"  >
                     </canvas>                 
             </div>
         </div>
     </div>
     <div class="col col-sm-4">
         <div class="card mb-3">
             <div class="card-body">
                     <canvas baseChart [datasets]="this.service.OfferedChartData" [labels]="this.service.Offeredlabels" [options]="this.graphSettings._barChart13Options"
                     [colors]="this.graphSettings._barChartColourList"  [legend]="this.graphSettings.barChartLegend" [chartType]="this.graphSettings.barChartType" >
                     </canvas>
             </div>
         </div>
     </div>
     <div class="col col-sm-4">
         <div class="card mb-3">
             <div class="card-body">
                     <canvas baseChart [datasets]="this.service.ReceivedChartData" [labels]="this.service.Receivedlabels" [options]="this.graphSettings._barChart14Options"
                     [colors]="this.graphSettings._barChartColourList"   [legend]="this.graphSettings.barChartLegend" [chartType]="this.graphSettings.barChartType" >
                     </canvas>                
             </div>
         </div>
     </div>
 </div>
 </div>

please provide the HTML code, how do you wrap the content to save as pdf? — OAH

Roman Leliuk Roman Leliuk · Accepted Answer · 2020-05-19T16:31:34

Maybe it's because of x,y offset? Try to set zero:

pdf.addImage(contentDataURL, 'JPEG', 0, 0, imgWidth, imgHeight)

Also double check the imgHeight, maybe your calculation is wrong and imgHeight is lower that thay should be.

Image getting cut off from top using html2canvas and JSPdf

1 Answers