html div导出pdf,使用Javascript从div中的HTML生成pdf

小编典典

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的特殊元素处理程序中忽略该ID。因此，您的HTML应该如下所示：

don't print this to pdf

print this to pdf

然后，使用以下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等的值。例：

• Print me!

2020-04-25