使用html2pdf导出到pdf时，图表会被剪切

Question

我正在使用一个库(ng2 charts(在我的Angular应用程序中创建图表，然后尝试使用html2pdf将其导出为pdf，但图表正在被剪切。有算法解决方案吗？例如：使用高度来计算图表是否适合页面或使用下一页。

<canvas baseChart 
[data]="chartData" 
[labels]="chartLabels" 
[chartType]="'pie'" 
[colors]="pieChartColors" (chartClick)="chartClicked($event)"></canvas>

第页。S.

事实上，我找不到一个合适的库来将图表以角度导出为pdf，因为大多数图表在某种程度上都不合适。因此，我使用了itext 7 pdfhtml。NET在我的后端，我将我的html发送到它。这个包装很容易用。

Answer 1

我在处理您的stackblitz时遇到了一些问题，所以我为您的问题创建了一个git repo，请查看下面的链接，

图表到pdf

https://github.com/PrashanthGowda/charts-to-pdf.git

Answer 2

实际上，我找不到一个合适的库来将图表导出为angular格式的pdf，因为大多数图表在某种程度上都不合适。所以我使用了itext 7 pdfhtml。NET在我的后端，我将我的html发送到它。这个包装很容易用。

https://itextpdf.com/itext7/pdfHTML

Answer 3

您可以使用它。

public ExtractPDF()  
{  
var data = document.getElementById('htmlData');  
const divHeight = data.clientHeight
const divWidth = data.clientWidth
const ratio = divHeight / divWidth;
html2canvas(data,
{
height: window.outerHeight + window.innerHeight,
width: window.outerWidth + window.innerWidth,
windowHeight: window.outerHeight + window.innerHeight,
windowWidth: window.outerWidth + window.innerWidth,
scrollX: 0,
scrollY: 0
}
).then(canvas => {  
var pdf = new jsPDF("l", "mm", "a4"); 
var imgData = canvas.toDataURL('image/png');
var width = pdf.internal.pageSize.getWidth();
var height = pdf.internal.pageSize.getHeight();
pdf.addImage(imgData, 'PNG', 0, 0, width, height*ratio); 
pdf.save('usuariodispositivo.pdf'); 
});  
}  

这个参数和比率可以通过img完全包含数据。

再见