小编典典

使用Javascript从div中的HTML生成pdf

javascript

我有以下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,而不是文本。


阅读 634

收藏
2020-04-25

共1个答案

小编典典

jsPDF可以使用插件。 为了使其能够打印HTML,您必须包括某些插件,因此必须执行以下操作:

  1. 转到https://github.com/MrRio/jsPDF并下载最新版本。
  2. 在您的项目中包括以下脚本:
    • jspdf.js
    • jspdf.plugin.from_html.js
    • jspdf.plugin.split_text_to_size.js
    • jspdf.plugin.standard_fonts_metrics.js

如果要忽略某些元素,则必须用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>
2020-04-25