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,

{

'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

html div导出pdf,使用Javascript从div中的HTML生成pdf相关推荐

java 字符串转pdf文件_java中根据模板生成pdf文件
原标题:java中根据模板生成pdf文件阅读目录简介业务需求引入jar包 pdf模板文件与方法参数代码部分总结归纳回到顶部简介本文使用java引入apach提供的pdf操作工具生成p ...
html div中显示pdf,使用Javascript从div中的HTML生成pdf
汪汪一只猫 jsPDF能够使用插件.为了使它能够打印HTML,您必须包含某些插件,因此必须执行以下操作:去https://github.com/MrRio/jsPDF下载最新版本.在项目中包括以下脚本 ...
Vue中前端实现生成 PDF 并下载
思路: 通过 html2canvas 将 HTML 页面转换成图片,然后再通过 jspdf 将图片的 base64 生成为 pdf 文件. 安装及引入 // 将页面 html 转换成图片 npm in ...
php+tcpdf+表格,PHP中使用TCPDF生成PDF文档实例
实际工作中,我们要使用PHP动态的创建PDF文档,目前有许多开源的PHP创建PDF的类库,今天我给大家来介绍一款优秀的PDF库,它就是TCPDF,TCPDF是一个用于快速生成PDF文件的PHP5函数包 ...
Java生成pdf设置两行页脚_Itextpdf 5 html生成pdf 页眉页脚
效果图 QQ图片20190117140345.png 继承PdfPageEventHelper重写onEndPage方法 package com.xuqiang.itext.test; import ...
【生成PDF】Java如何根据前台Echarts图表生成PDF，并下载
文章目录前言一.如何通过java代码生成PDF? 1.依赖二.如何在PDF中画前台的echarts图? 1.如何拿到前台echarts图的信息? 前台代码: 后台逻辑:生成PDF,并下载 PDF ...
linux中编辑pdf文件,如何在Ubuntu中创建和编辑PDF文件
在打印,共享和通过电子邮件发送文档(尤其是大型文档)时,PDF或可移植文档格式通常是我们的首选.对于Windows和MacOS,您可能非常熟悉,也依赖于广泛使用的Acrobat产品来进行pdf创建,查 ...
在Android中利用iText生成PDF
iText 是java和C#中的一个处理PDF的开源类库,国外的大牛已经把它移植到Android上了,但是直接拿来用还是需要花费一点功夫,下面就用一个简单的demo来测试一下. iText项目地址:h ...
java生成pdf盖章合同_Java中使用 FreeMarker 生成pdf盖章合同文件
[实例简介] 1.html模板+model数据,通过freemarker进行渲染,便于维护和修改 2.渲染后的html流,可通过Flying Saucer组件生成pdf文件流,或者生成pdf后再转成j ...

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

html div导出pdf,使用Javascript从div中的HTML生成pdf相关推荐

最新文章

热门文章