使用html2canvas和JSPdf将图像从顶部切掉。

Question

我正在使用jspdf和html2canvas从html中创建一个多页的PDF，但我的图像从顶部被切断了一点。我尝试了所有可能的解决方案，从不同的论坛，但没有成功。以下是代码[附图供参考] https:/i.stack.imgur.com7FoF5.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>

Answer 1

也许是x,y偏移的缘故，试着设置为零。

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

另外，请仔细检查一下imgHeight，也许是你的计算错误，imgHeight比应该的低。