Question

我正在将jspdf和html2canvas用于创建发票的pdf。它只为完整发票创建一页。我想要的是我应该能够为更大的数据创建多个A4尺寸页面。您能告诉我这个问题的解决方法吗？

这是在线代码的链接。

https://stackblitz.com/edit/angular-1zwnqh

  html2canvas(document.querySelector(".printformClass")).then(canvas => {

       let totalPages=canvas.height/842;
       var pdf = new jsPDF('p', 'pt',[canvas.width, 842]);
       console.log(pdf);
       for(let i=1;i<=totalPages;i++)
       {
        var imgData  = canvas.toDataURL("image/jpeg", 1.0);
        pdf.addImage(imgData,0,0,canvas.width, 842*i);
        pdf.addPag(canvas.width,842*i);
       }
        pdf.save('converteddoc.pdf');
      })

pdf应该在多个A4尺寸页面中吗？

Answer 1

这是您的拼写错误：

pdf.addPag(canvas.width,842*i);

我将使用jsPDF自动表，这样两页之间就不会有一半的行，并且看起来会更加专业，您可以避免使用html2Canvas

使用ViewChild

@ViewChild('table')table: ElementRef;

功能内：

pdf.autoTable({ html: this.table.nativeElement });

Answer 2

我有相同的要求，并通过以下解决方法解决了该问题

var doc = new jsPDF('p', 'px',[x,y]);
var adjust = -1050; //1050 is my assupmtion of how many pixels each page holds vertically
var extraNo=Math.ceil(heightOfElement/1050); //Lets me know how many page are needed to accommodate this image

for(r=0;r<extraNo;r++){

                doc.addImage(canvas, 'JPEG', 0,(adjust)*r, undefined, undefined);
                doc.addPage();

               }

此块之后，我将退出循环并继续保存PDF。

（调整）* r 将在每次迭代时增加，从而可以定位同一图像，以使每页从上一页的所在位置继续。

请注意，我使用 px 的原因是我的要求非常明确，并且目标屏幕分辨率不会改变。您可以使用英寸或大约A4打印尺寸的纸张。

使用HTML2CANVAS使用jspdf的多个页面？

2 个答案: