javascript - 使用 html2canvas 和 JSPdf 从顶部截断图像
问题描述
我正在使用 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>
解决方案
也许是因为 x,y 偏移?尝试设置为零:
pdf.addImage(contentDataURL, 'JPEG', 0, 0, imgWidth, imgHeight)
还要仔细检查 imgHeight,也许你的计算是错误的,imgHeight 低于应有的值。
推荐阅读
- libreoffice-calc - 使用 LibreOffice Calc 中其他单元格上指定的行范围求和
- windows - 如何获取 Powershell 中的 CPU 内核数?
- c - 如何让我的程序跳过 uint32_t,然后开始将其余的二进制数据读入 C 中的结构?
- javascript - 在 axios 和 insomnia 上没有得到预期的响应
- javascript - TypeError:无法读取未定义的属性(读取“和”)
- typescript - TypeScript 推断函数第一个参数的第二个参数
- linked-list - 关于 LeetCode 2 和链表的问题
- c - 我的程序中的加密和解密错误(C)
- python - 限制 NaN 比较
- python - OBJECT 没有名为“goto”的属性。文档显示它清楚地表明它确实