通过 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

在 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 中的不同元素。

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

Answer 2

出于某种原因，Adam 的回答对我来说从来没有奏效过。相反，我采用了创建一个新 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 的质量。