html2canvas，将多个元素组合成一个pdf

Question

我有一个网页我想将其中的一部分呈现为 pdf，我有几个不同的部分我想拼凑起来，看起来像：

  [svg-plot1][svg-plot2]     [table of data]

  [other data table]

我可以使用 html2canvas 抓取这张确切的图片，并使用 jsPDF 将其制作成 pdf，但它太大并且结尾被切断了。 我只想将绘图作为图像抓取，然后将其余表格添加为文本。所以它看起来像：

  [svg-plot1][svg-plot2]
  [table of data]
  [other table of data]

是否可以将多个图像与常规表格数据合并并制作一个我想要制作的pdf？

这是我当前的代码呈现一个元素的样子：

var doc = new jsPDF('l','mm','a4');
html2canvas(element,{
   onrendered: function (canvas) {
       var img = canvas.toDataURL('image/png');            
       doc.addImage(img,'PNG',0,0);            
       doc.save();
   }
});

Answer 1

当您使用 html2canvas 创建多个图像并希望将所有这些图像部分合并到一个 pdf 中时，请创建一个 jsPDF 对象，并且每次添加新部分时都使用此对象并在添加新图像之前添加一个空白页。

var doc = new jsPDF('l','mm','a4');
//create first image
html2canvas(element,{
   onrendered: function (canvas) {
       var img = canvas.toDataURL('image/png');
       doc.addImage(img,'PNG',0,0);
   }
});
//create second image
html2canvas(second_element,{
   onrendered: function (canvas) {
       var img = canvas.toDataURL('image/png');
       doc.addPage('l','mm','a4');
       doc.addImage(img,'PNG',0,0);
   }
});
doc.save();