通过jsPDF的addHTML将多个元素添加到PDF

Question

我正在使用angular-ui选项卡集来显示几个单独的信息位。 因为未激活的选项卡的实际内容是隐藏的，所以如果仅添加页面的整个正文，则不会打印出来。 您在打印后看到的唯一标签内容是当前活动的标签。 我试图使用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最终会#foo我上面#foo的相同问题。

任何建议以正确的方式做到这一点将不胜感激。

Answer 1

由于某种原因，亚当的回答从未对我有用。 取而代之的是，我采用了创建一个新的div的方法，将所有内容附加到该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质量。

Answer 2

在addHTML回调之外调用pdf.save()很有可能在addHTML方法有机会添加html之前创建pdf。 尝试这样的事情：

未测试

var pdf = new jsPDF('p', 'pt', 'a4');
var elements = $(".bar");
var i = 0;
var recursiveAddHtml = function () {
    if (i < elements.length) {
        var x = 0, y = i * 20; 
        pdf.addHTML(elements.get(i), x, y, function () {
            i++;
            recursiveAddHtml();
        });
    } else {
        pdf.save();
    }
}

recursiveAddHtml();

这应该为每个元素一次调用recursiveAddHtml ，然后在到达末尾时调用save 。

更新资料

我只是尝试了一下，它似乎起作用了，除了它将所有元素都放在另一个之上。 我尚不确定如何检测pdf中当前内容的高度，因此我在示例中添加了x和y坐标，这样您至少可以看到PDF中的不同元素。

另外，请确保将背景颜色设置为其他颜色，否则默认为黑色。