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时采用第二种方法，它只是完全空白。

值得注意的是，这有效，但它没有格式化我希望和的内容比我更喜欢：<\ n / p>

  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的质量。

Answer 2

在addHTML方法有机会添加html之前，在addHTML回调之外调用pdf.save()很可能会创建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中的不同元素。

另外，请确保将背景颜色设置为某些内容，否则默认为黑色。

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

2 个答案: