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

问题描述

我正在使用 angular-ui选项卡来显示几个单独的信息.因为未激活的选项卡的实际内容是隐藏的，所以如果仅添加页面的整个正文，则不会打印出来.您在打印后看到的唯一标签内容是当前活动的标签.我试图使用 addHTML 方法打印这些选项卡中的所有内容以及页面中的另一个元素，以保留其外观.

I am using an angular-ui tabset to display several separate bits of information. Because the actual content of the tabs that aren't active is hidden, it does not print if I just add the entire body of the page. The only tab content that you see after printing is the currently active tab. I'm attempting to print everything inside of these tabs along with another single element from the page using the addHTML method to preserve the way that it looks.

单独打印其中任何一个效果很好，但是我似乎找不到一种可以一次打印所有项目的方法.

Printing any of these individually works well, but I can't seem to find a way to print all of the items at once.

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

For example, this is the code used to print a single element.

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

那行得通(尽管输出是全黑，但是我想那是一个单独的问题).现在，我想使用几个 addHTML 语句来完成添加所需的内容，然后保存.像

That works (although the output is all black, but I suppose that's a separate issue). Now, I would like to have several addHTML statements to finish adding the content I need and then save. Something like

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

但是，采用第二种方法保存pdf时，它完全是空白的.

However, taking the second approach when the pdf is saved, it is just completely blank.

值得注意的是，它可以工作，但是它没有我想要保留的格式，并且 的内容比我想要的还要多:

It's worth noting that this works, but it doesn't have the formatting that I would like to keep and has more content than I'd like:

  var doc = new jsPDF();

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

试图强迫它只选择 #foo 和 .bar 最终导致了我上面遇到的相同问题.

Attempting to force it to select just #foo and .bar ends up coming out to the same problem that I have above.

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

Any suggestoins on the correct way to do this would be greatly appreciated.

推荐答案

由于某种原因，亚当的答案对我而言从来没有奏效.取而代之的是，我采用了创建一个新的div的方法，将所有内容附加到该div中，进行打印，然后销毁它.可以通过以下方式实现这一点:

Adam's answer never quite worked for me, for one reason or another. Instead, I went with the approach of creating a new div, appending all of my stuff to it, printing it, and then destroying it. That can be accomplished via something along these lines:

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

Note that the pagesplit option splits the image up if it is larger than one page, but (as of the date of this answer) seems to vastly lower the quality of the PDF generated.

这篇关于通过jsPDF' s addHTML将多个元素添加到PDF的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！