如何使用 JavaScript 从 Div 中的 HTML 生成 PDF？-js教程-PHP中文网

如何使用 JavaScript 从 Div 中的 HTML 生成 PDF？

Linda Hamilton

发布： 2024-12-08 10:51:13

原创

653 人浏览过

How to Generate a PDF from HTML within a Div using JavaScript?

使用Javascript从div中的HTML生成PDF

需要完成的任务是将div的内容与ID转换将“pdf”转换为 PDF 文档。该 PDF 文档必须自动下载，文件名为“foobar.pdf”。

虽然 jspdf 通常用于 PDF 生成，但其文本功能限制提出了挑战。它只接受字符串值，而需要 HTML 输入。为了解决这个问题，需要插件，例如jspdf.plugin.from_html.js和jspdf.plugin.split_text_to_size.js。以下是如何使用这些插件来实现所需的结果：

首先将必要的脚本合并到您的项目中：

jspdf.js
jspdf.plugin.from_html.js
jspdf.plugin.split_text_to_size.js
jspdf.plugin.standard_fonts_metrics.js

登录后复制

如果某些元素需要要从 PDF 中排除，必须为它们分配一个 ID，并在 jsPDF 的特殊元素处理程序中进行标识。例如，要排除 ID 为“ignorePDF”的元素，请修改 HTML 代码，如下所示：

<!DOCTYPE html>
<html>
  <body>
    <p>

登录后复制

以下 JavaScript 代码将生成 PDF 并将其显示在弹出窗口中window:

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。”

需要注意的是，特殊元素处理程序主要处理当前版本中的 ID。因此，使用类选择器（例如“.ignorePDF”）不会产生预期的结果。

此外，jsPDF 缺乏对 CSS 样式的支持，并且只会打印文本节点内的文本。因此，文本区域和类似元素的值不会包含在 PDF 中。

以上是如何使用 JavaScript 从 Div 中的 HTML 生成 PDF？的详细内容。更多信息请关注PHP中文网其他相关文章！