Question

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

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

P.S。

我实际上找不到合适的库来将图表导出为有角度的pdf，因为它们中的大多数都不适合某种方式。因此，我在将html发送到的后端中使用了.NET的 itext 7 pdfhtml 。该软件包非常易于使用。

Answer 1

在处理您的堆栈闪电问题上，我遇到了一些问题，因此我为您的问题创建了一个git repo，请检查下面的链接，

Charts to pdf

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

Answer 2

我实际上找不到合适的库来将图表导出为有角度的pdf，因为它们中的大多数都不适合某种方式。因此，我在将html发送到的后端中使用了.NET的itext 7 pdfhtml。该软件包非常易于使用。

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完全包含此参数和比率。

再见

使用html2pdf

3 个答案: