我有以下 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>
我想做的就是打印到 pdf 中找到的任何 ID 为“pdf”的 div。这必须使用 JavaScript 完成。然后应自动下载“pdf”文档,文件名为“foobar.pdf”
我一直在使用 jspdf 来做这个,但它唯一的功能是“text”,它只接受字符串值。我想将 HTML 提交给 jspdf,而不是文本。
12 回答
**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 应如下所示:
然后使用以下 JavaScript 代码在 PopUp 中打开创建的 PDF:
对我来说,这创建了一个漂亮而整洁的 PDF,其中只包括“打印到 pdf”这一行。
请注意,特殊元素处理程序仅处理当前版本中的 ID,这也在GitHub 问题中说明。它指出:
因此,用“.ignorePDF”等类选择器替换“#ignorePDF”对我来说不起作用。相反,您将不得不为每个要忽略的元素添加相同的处理程序,如:
从例子开始,还可以选择像'a'或'li'这样的标签。对于大多数用例来说,这可能有点无限制:
一个非常重要的事情是你丢失了所有的风格信息(CSS).幸运的是,jsPDF 可以很好地格式化 h1,h2,h3 等,这对我来说已经足够了.另外,它只会在文本节点中打印文本,这意味着它不会打印 textareas 等的值.例:
这是一个简单的解决方案。这适用于 me.You 可以使用 javascript 打印概念,并将其简单保存为 pdf。
您可以使用 autoPrint()并将输出设置为'dataurlnewwindow',如下所示:
如上所述,您应该使用jsPDF和html2canvas。我还在 jsPDF 的问题中找到了一个函数,它会自动将你的 pdf 分成多个页面(来源)
如果你需要下载特定页面的 pdf,只需添加这样的按钮
使用 window.print()打印您的所有页面而不仅仅是 div
如果要导出表,可以查看 Shield UI Grid 小部件提供的这个出口样本。
这是通过扩展配置来完成的:
一种方法是使用 window.print()功能.哪个不需要任何库
****优点
1.No 外部库需要。
2.We 也可以只打印身体的选定部位。
3.No css 冲突和 js 问题。
4.Core html/js 功能
---Simply 添加以下代码
CSS来
**JS 代码 -**在 btn 点击时调用 bewlow 函数
注意:在每个 css 对象中使用!important
示例 -
我能够让 jsPDF 从 div 打印动态创建的表。
与 Chrome 和 Firefox 配合使用......格式化在 IE 浏览器中全部爆炸。
我还包括这些:
这为我服务多年了:
我使用 jspdf 和 html2canvase 进行 css 渲染,我导出特定 div 的内容,因为这是我的代码
});
要将 div 捕获为 PDF,您可以使用https://grabz.it解决方案。它有一个简单灵活的 JavaScript API,允许您捕获单个 HTML 元素的内容,如 div 或 span
为了实现它,您需要首先获得应用密钥和秘密和下载(免费)SDK。
现在举个例子。
假设你有 HTML:
要捕获功能 ID 下的内容,您需要:
请注意
target: #feature
。#feature
是 CSS 选择器,就像前面的例子一样。现在,当加载页面时,现在将在与脚本标记相同的位置创建图像屏幕截图,脚本标记将包含功能 div 的所有内容,而不包含任何其他内容。您可以对 div-screenshot 机制进行其他配置和自定义,请查看这里
jsPDF已更新。这是正确的代码