使用 HTML2CANVAS 的多个带有 jspdf 的页面？答案

【问题标题】：Multiple pages with jspdf using HTML2CANVAS?使用 HTML2CANVAS 的多个带有 jspdf 的页面？
【发布时间】：2019-12-28 16:26:43
【问题描述】：

我正在使用带有 html2canvas 的 jspdf 来创建我的发票的 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 尺寸的页面吗？

【问题讨论】：

标签： typescript angular6 jspdf html2canvas

【解决方案1】：

这里有一个拼写错误：

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

我会使用 jsPDF 自动表格，这样两页之间就没有半行，看起来更专业，你可以避免使用 html2Canvas

使用 ViewChild

@ViewChild('table')table: ElementRef;

在你的函数内部：

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

【讨论】：

【解决方案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。

(adjust)*r 将在每次迭代时递增，从而允许以这样一种方式定位相同的图像，即每一页都从前一页离开的地方继续。

请注意，我使用了 px，因为我的要求非常具体，目标屏幕分辨率不会改变。您可以使用英寸或大约 A4 打印尺寸的东西。

【讨论】：