我有以下html代码:
<!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>
我要做的就是将div中ID为“ pdf”的任何内容打印为pdf。这必须使用JavaScript来完成。然后应使用文件名“foobar.pdf”自动下载“pdf”文档
我一直在使用jspdf来执行此操作,但是它唯一具有的功能是“文本”,它仅接受字符串值。我想将HTML提交给jspdf,而不是文本。
jsPDF可以使用插件。 为了使其能够打印HTML,您必须包括某些插件,因此必须执行以下操作:
如果要忽略某些元素,则必须用ID标记它们,然后可以在jsPDF的特殊元素处理程序中忽略该ID。因此,您的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代码在弹出窗口中打开创建的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样式的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>