栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

使用Javascript从div中的HTML生成pdf

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

使用Javascript从div中的HTML生成pdf

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>


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/517739.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号