每个div的Html2canvas分别导出为pdf

Question

我有Page,它有6个div,同一个类名"exportpdf",我使用jspdf和html2canvas将这些div转换为pdf

var elementTobePrinted = angular.element(attrs.selector),
iframeBody = elementTobePrinted.contents().find('div.exportpdf');

在html2canvas .....

html2canvas(elementTobePrinted, {
  onrendered: function (canvas) {
    var doc = new jsPDF();     
    for(var i=1;i<elementTobePrinted.length;i++){
      doc.addImage(canvas.toDataURL("image/jpeg"), 'jpeg', 15, 40, 180, 160);
      doc.addImage(canvas.toDataURL("image/jpeg"),'JPEG', 0, 0, 215, 40)
      doc.addPage();
    } 

    doc.save(attrs.fileName);
}

我将页面转换为canvas.its为整个pdf创建相同的div内容.我需要每个div内容到不同页面的相同pdf.

谁能帮我？

问题出在html2canvas上:

doc.addImage(canvas.toDataURL("image/jpeg"), 'jpeg', 15, 40,180, 160); 

在这里,我需要将elementTobePrinted列表传递给addImage.

Answer 1

我认为这里的问题是这elementTobePrinted不是你想象的那样。

当您运行代码时：

var elementTobePrinted = angular.element(attrs.selector)

这将返回一个包含符合条件的每个元素的列表，因此您说您有 6 个这样的元素（“它有 6 个 div”）。

您是否尝试过更换：

html2canvas(elementTobePrinted, {
  onrendered: function (canvas) {
    var doc = new jsPDF();     
    for(var i=1;i<elementTobePrinted.length;i++) {
      doc.addImage(canvas.toDataURL("image/jpeg"), 'jpeg', 15, 40, 180, 160);
      doc.addImage(canvas.toDataURL("image/jpeg"),'JPEG', 0, 0, 215, 40)
      doc.addPage();
    } 
    doc.save(attrs.fileName);
}

和...

for(var i=0; i<elementTobePrinted.length; i++){
  html2canvas(elementTobePrinted[i], {
    onrendered: function (canvas) {
      var doc = new jsPDF();     
      doc.addImage(canvas.toDataURL("image/jpeg"), 'jpeg', 15, 40, 180, 160);
      doc.addImage(canvas.toDataURL("image/jpeg"),'JPEG', 0, 0, 215, 40)
      doc.addPage();
      doc.save(attrs.fileName);
    }
}

我建议这样做的原因是 html2Canvas 想要一个SINGLE元素作为其第一个参数，并且上面的示例传递了一个元素列表（我认为，假设angular.element(attrs.selector)找到您要打印的所有 6 个 div）。