<!DOCTYPE html>
<html>
<body>
<p>don't print this to pdf</p>
<div id="pdf">
<p><font size="3" color="red">print this to pdf</font></p>
</div>
</body>
</html>
我要做的就是打印到pdf，无论在div中找到的ID为“ pdf”的任何内容。这必须使用JavaScript来完成。然后应使用“ foobar.pdf”的文件名自动下载“ pdf”文档。
我一直在使用jspdf来执行此操作，但是它唯一具有的功能是“文本”，仅接受字符串值。我想将HTML提交给jspdf，而不是文本。
#1 楼
jsPDF可以使用插件。为了使其能够打印HTML，您必须包括某些插件，因此必须执行以下操作：转到https://github.com/MrRio/jsPDF并下载最新版本。
在您的项目中包含以下脚本：
jspdf.js
jspdf.plugin.from_html.js
jspdf.plugin。 split_text_to_size.js
jspdf.plugin.standard_fonts_metrics.js
如果要忽略某些元素，则必须用ID标记它们，您可以然后在jsPDF的特殊元素处理程序中忽略。因此，您的HTML应该如下所示：
<!DOCTYPE html>
<html>
<body>
<p id="ignorePDF">don't print this to pdf</p>
<div>
<p><font size="3" color="red">print this to pdf</font></p>
</div>
</body>
</html>
然后，您使用以下JavaScript代码来在PopUp中打开创建的PDF：
var doc = new jsPDF();
var elementHandler = {
'#ignorePDF': function (element, renderer) {
return true;
}
};
var source = window.document.getElementsByTagName("body")[0];
doc.fromHTML(
source,
15,
15,
{
'width': 180,'elementHandlers': elementHandler
});
doc.output("dataurlnewwindow");
对我来说，这创建了一个漂亮而整洁的PDF，其中仅包含“将其打印为pdf”行。
请注意，特殊元素处理程序仅处理当前版本中的ID，这在GitHub Issue中也有说明。它指出：
因为对节点树中的每个元素都进行了匹配，所以我希望尽可能快地进行匹配。在这种情况下，这意味着“仅元素ID匹配”。元素ID仍以jQuery样式“ #id”完成，但这并不意味着支持所有jQuery选择器。
因此，用类选择器（例如.ignorePDF）代替'#ignorePDF'对我不起作用。相反，您必须为每个要忽略的元素添加相同的处理程序，例如：
var elementHandler = {
'#ignoreElement': function (element, renderer) {
return true;
},
'#anotherIdToBeIgnored': function (element, renderer) {
return true;
}
};
从示例还可以看出选择“ a”或“ li”之类的标签。不过，对于大多数用例来说，这可能是无限制的：
我们支持特殊的元素处理程序。使用jQuery-style
ID选择器注册ID或节点名称。 （“ #iAmID”，“ div”，“ span”等）
目前不支持任何其他类型的选择器（
复合的类）。
要添加的一个非常重要的事情是您丢失了所有样式信息（CSS）。幸运的是，jsPDF能够很好地格式化h1，h2，h3等格式，这足以满足我的目的。另外，它将仅打印文本节点内的文本，这意味着它将不打印textareas等的值。示例：
<body>
<ul>
<!-- This is printed as the element contains a textnode -->
<li>Print me!</li>
</ul>
<div>
<!-- This is not printed because jsPDF doesn't deal with the value attribute -->
<input type="textarea" value="Please print me, too!">
</div>
</body>
评论
我猜元素处理程序可以是一个类吗？从语义上讲，这将更符合HTML5标准。 ID不仅在CSS中具有过多的特殊性，而且还必须是唯一的。
–紧急
2015年1月3日，7：28
不，据我所知，类目前不是有效的选择器，如它们的示例所述：“我们支持特殊的元素处理程序。请使用jQuery样式的ID选择器为ID或节点名称注册它们。（“＃iAmID”， “”（“ div”，“ span”等）。目前不支持任何其他类型的选择器（类，复合类）。不过，如果标签名称与您的用例相符并且没有在页面上隐藏其他重要元素，则仍可以使用标签名称。
–snrlx
2015年1月6日在9:02
他们在其页面parall.ax/products/jspdf上声明通过垫片支持IE6 +。我自己还没有尝试过。
–snrlx
15年3月6日在10:41
@snrlx我得到空白的pdf并出现此错误：renderer.pdf.sHashCode不是函数
–莉萨·所罗门（Lisa Solomon）
16 Mar 23 '16 at 3:39
“如果要忽略某些元素，则必须用ID标记它们”-一个很棒的库，被倒置的需求毁坏了。 OP希望打印单个
，它可能是数百个之一-因此他必须标记所有不需要的DOM元素？
–莫格说要恢复莫妮卡
17年1月24日，19：13
–莫格说要恢复莫妮卡
17年1月24日，19：13
#2 楼
这是简单的解决方案。这对我有用。您可以使用javascript打印概念并将其简单保存为pdf。<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$("#btnPrint").live("click", function () {
var divContents = $("#dvContainer").html();
var printWindow = window.open('', '', 'height=400,width=800');
printWindow.document.write('<html><head><title>DIV Contents</title>');
printWindow.document.write('</head><body >');
printWindow.document.write(divContents);
printWindow.document.write('</body></html>');
printWindow.document.close();
printWindow.print();
});
</script>
</head>
<body>
<form id="form1">
<div id="dvContainer">
This content needs to be printed.
</div>
<input type="button" value="Print Div Contents" id="btnPrint" />
</form>
</body>
</html>
评论
“并且简单地将其另存为pdf”-我错过了这一部分。你怎么做呢？
–莫格说要恢复莫妮卡
17年1月24日在19:16
这对我有用，为了解决CSS样式问题，我创建了另一个名为printPDF.css的css文件，并使用链接标记添加了上述示例中的代码：printWindow.document.write（'
评论
如上所述，我不想使用“文本”功能。我想给它HTML。您的链接仅处理纯文本，而不处理htmljsPDF确实具有fromHTML函数；请参见以下网址的“ HTML Renderer”示例：mrrio.github.io/jsPDF
在此处尝试jsPDF教程freakyjolly.com/create-multipage-html-pdf-jspdf-html2canvas