javascript - 通过jsPDF的addHTML向PDF添加多个元素

Question

我正在使用 angular-ui tabset显示几个单独的信息位。由于不活动的选项卡的实际内容是隐藏的，因此如果我只添加页面的整个正文，则不会打印它。打印后您看到的唯一选项卡内容是当前事件的选项卡。我尝试使用 addHTML 方法打印这些选项卡内的所有内容以及页面中的另一个单个元素，以保留其外观。

单独打印其中任何一个都效果很好，但我似乎找不到一种方法来一次打印所有项目。

例如，这是用于打印单个元素的代码。

var pdf = new jsPDF('p', 'pt', 'a4');
pdf.addHTML($('#foo').first(), function() {
    pdf.save();
});

这有效(虽然输出是全黑，但我认为这是一个单独的问题)。现在，我想要几个 addHTML 语句来完成添加我需要的内容，然后保存。类似的东西

var pdf = new jsPDF('p', 'pt', 'a4');
pdf.addHTML($('#foo').first());
_.each( $('.bar').first().children(), function(e) {
    pdf.addHTML(e);
});
pdf.save();

然而，采用第二种方法，当保存pdf时，它完全是空白的。

值得注意的是，这可行，但它没有我想要保留的格式并且内容比我想要的更多:

  var doc = new jsPDF();

  doc.fromHTML($('body').get(0), 15, 15, {
    'width': 170,
  }, function() {
    doc.save();
  });

尝试强制它仅选择 #foo 和 .bar 最终会遇到与我上面遇到的相同问题。

任何有关正确方法的建议将不胜感激。

Answer 1

出于这样或那样的原因，亚当的回答对我来说从来都不太有效。相反，我采用了创建一个新 div 的方法，将我的所有内容附加到其中，打印它，然后销毁它。这可以通过以下方式来完成:

      var pdf = new jsPDF('p','pt','letter');

      $("#printing-holder").append("<div id='printingDiv' style='background-color: white;'></div>");
      ($('#foo')).clone().appendTo("#printingDiv");
      _.each( $('.bar').children(), function(e) {
        $("#printingDiv").append('<br/>');
        $(e).clone().appendTo("#printingDiv");
        $("#printingDiv").append('<br/>');
      });
      pdf.addHTML(($("#printingDiv")[0]), {pagesplit: true}, function() {
        console.log("THING");
        pdf.save();
        $("#printingDiv").remove();
      });

请注意，如果图像大于一页，pagesplit 选项会将图像分割，但(截至本答案发布之日)似乎会大大降低生成的 PDF 的质量。