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();