使用 html2canvas 和 JSPdf 从顶部截断图像

Question

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

Answer 1

也许是因为 x,y 偏移？ 尝试设置为零：

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

还要仔细检查 imgHeight，也许你的计算有误，imgHeight 低于应有的值。