javascript 通过 jsPDF 的 addHTML 向 PDF 添加多个元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26240788/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add Multiple Elements to PDF via jsPDF's addHTML
提问by Linell
I am using an angular-ui tabsetto 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 addHTMLmethod to preserve the way that it looks.
我正在使用angular-ui 标签集来显示几个单独的信息位。因为不活动的选项卡的实际内容是隐藏的，所以如果我只是添加页面的整个正文，它就不会打印。打印后您看到的唯一选项卡内容是当前活动的选项卡。我正在尝试使用该addHTML方法打印这些选项卡内的所有内容以及页面中的另一个单个元素，以保留其外观。
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();
});
That works (although the output isall black, but I suppose that's a separate issue). Now, I would like to have several addHTMLstatements to finish adding the content I need and then save. Something like
那行得通（虽然输出全是黑色，但我想这是一个单独的问题）。现在，我想有几个addHTML语句来完成添加我需要的内容然后保存。就像是
var pdf = new jsPDF('p', 'pt', 'a4');
pdf.addHTML($('#foo').first());
_.each( $('.bar').first().children(), function(e) {
pdf.addHTML(e);
});
pdf.save();
However, taking the second approach when the pdf is saved, it is just completely blank.
但是，在保存pdf时采用第二种方法，它只是完全空白。
It's worth noting that this works, but it doesn't have the formatting that I would like to keep andhas more content than I'd like:
值得注意的是，这行得通，但它没有我想要保留的格式，而且内容比我想要的要多：
var doc = new jsPDF();
doc.fromHTML($('body').get(0), 15, 15, {
'width': 170,
}, function() {
doc.save();
});
Attempting to force it to select just #fooand .barends up coming out to the same problem that I have above.
试图强制它只选择#foo并.bar最终出现与我上面相同的问题。
Any suggestoins on the correct way to do this would be greatly appreciated.
任何有关正确方法的建议将不胜感激。
回答by Linell
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:
出于某种原因，亚当的回答对我来说从未奏效。相反，我采用了创建一个新 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();
});
Note that the pagesplitoption 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.
请注意，pagesplit如果图像大于一页，该选项会将图像拆分，但是（截至本答案日期）似乎大大降低了生成的 PDF 的质量。
回答by adam0101
Calling pdf.save()outside of the addHTML callback will most likely create the pdf before the addHTML method had a chance to add the html. Try something like this:
pdf.save()在 addHTML 回调之外调用很可能会在 addHTML 方法有机会添加 html 之前创建 pdf。尝试这样的事情：
Not tested
未测试
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();
This should call recursiveAddHtmlfor each element, one at a time, then call savewhen it reaches the end.
这应该调用recursiveAddHtml每个元素，一次一个，然后save在它到达末尾时调用。
Update
更新
I just tried this out and it seems to work, except that it positions all elements on top of each other. I'm not sure how to detect the height of the content currently in the pdf yet, so I added x and y coordinates to the example so you can at least see the different elements in the PDF.
我刚刚尝试了这个，它似乎有效，只是它将所有元素放在彼此的顶部。我还不确定如何检测 pdf 中当前内容的高度，因此我在示例中添加了 x 和 y 坐标，以便您至少可以看到 PDF 中的不同元素。
Also, make sure you set the background-color to something otherwise it defaults to black.
另外，请确保将背景颜色设置为其他颜色，否则默认为黑色。
