如何使用 JavaScript 将 HTML 页面导出为 PDF？

可以使用 JavaScript 工具（如 jsPDF 或 html2pdf.js）将 HTML 页面转换为 PDF 文件。这些库简化了直接从网页 HTML 文本生成 PDF 文件的过程。当 HTML 元素及其相应的样式已被捕获并转换为 PDF 格式时，用户可以选择下载或保存生成的 PDF。通过在 Web 应用程序中插入必要的 JavaScript 代码，可以轻松启用此功能，并提供可打印、离线内容表示的便利性。此功能对于生成报表、生成 Web 材料的可打印版本以及为用户提供网站的离线文档版本很有用。

使用的方法

  • jsPDF 方法

  • html2pdf.js 方法

jsPDF 方法

在 jsPDF 方法中，开发人员使用 jsPDF 库通过 JavaScript 将 HTML 页面导出到 PDF。他们可以通过将 jsPDF 库嵌入 HTML 文件中，在客户端动态创建 PDF 文档。要将文本、图像和表格等内容添加到 PDF 中，需要创建一个新的 jsPDF 实例并使用其方法。HTML 页面的内容首先被转换为画布，然后使用 jsPDF 的 addImage() 方法添加到 PDF 中。最后，可以使用 save() 或 output() 方法下载或保存生成的 PDF。此方法提供了对内容修改的更多控制，使其适用于在创建 PDF 时需要特定样式和内容组织的情况。

算法

  • HTML 文件应包含 jsPDF 库 - 要使用 jsPDF，必须在 HTML 文件中包含该库。为此，请提供一个指向 jsPDF 库文件的脚本标签。

  • 创建一个新的 jsPDF 实例并根据需要配置它 - 包含库后，创建一个新的 jsPDF 对象实例。根据您的需求，还可以为页面大小、方向、边距等方面设置配置。

  • 选择 HTML 元素或从 HTML 字符串创建 DOM 元素 - 必须找到要导出为 PDF 的 HTML 信息。为此，要么从 DOM 中选择现有的 HTML 元素，要么使用 JavaScript 将 HTML 字符串转换为 DOM 元素。

  • 使用 HTML 到画布库将选定的 HTML 转换为画布（对于 jsPDF 可选） - 在此步骤中，可以选择使用 html2canvas 等外部库将选定的 HTML 内容转换为画布元素。此过程可确保最终 PDF 产品中复杂 HTML 元素的精确渲染。

  • 使用 jsPDF addImage() 方法将画布添加到 PDF - 现在，可以使用 jsPDF addImage() 方法将从 HTML 内容创建的画布添加到 PDF 文件中。此方法使用输入将画布元素插入到 PDF 中。

  • 如有必要，使用其他 jsPDF 方法将更多内容添加到 PDF - 除了已转换的 HTML 内容之外，还可以使用其他 jsPDF 方法将更多内容添加到 PDF 中，例如文本、图像或形状。这允许您进一步个性化 PDF 文件。

  • 使用 jsPDF save() 或 output() 方法下载或保存 PDF 文件 - PDF 准备就绪后，可以使用 save() 方法开始将其下载到用户的设备上。另一种选择是通过 output() 方法获取 PDF 作为数据 URI，然后可以将其用于各种目的，例如直接在浏览器中显示 PDF。

Learn JavaScript in-depth with real-world projects through our JavaScript certification course. Enroll and become a certified expert to boost your career.

html2pdf.js 方法

html2pdf.js 方法使用 html2pdf.js 库通过 JavaScript 将 HTML 页面导出为 PDF。使用此库，开发人员可以动态将 HTML 元素的子集转换为 PDF 文件。他们使用 JavaScript 选择所需的 HTML 内容，并将其与任何其他自定义一起传递给 html2pdf() 函数。然后由库处理转换，它还记录内容的组织和表示。通过自动转换 HTML 内容并减少手动干预，它简化了 PDF 生成过程。PDF 生成后，可以使用普通的浏览器功能轻松下载或保存它。对于希望获得简单解决方案而不必深入了解低级 PDF 内容操作的开发人员，此方法非常适合。

算法

  • HTML 文件应包含 html2pdf.js 库。

  • 选择要转换为 PDF 的 HTML 元素。

  • 创建一个命令行函数来启动 PDF 转换。

  • 函数内部 -

  • 使用 JavaScript 中的 DOM 操作选择 HTML 元素。

  • 将选定的元素和任何其他配置提供给 html2pdf() 函数。

  • 库将 HTML 内容转换为 PDF 格式，同时保持 HTML 的格式和组织。

  • 创建 PDF 文件并将其保存到计算机的内存中。

  • 允许用户使用链接/按钮下载或保存 PDF。

  • 当用户选择下载或保存选项时，使用常规浏览器下载方法启动 PDF 下载。

示例

Open Compiler
<!DOCTYPE html>
<html>
<head>
   <title>Export HTML to PDF</title>
   <script src="path/to/html2pdf.js"></script>
</head>
<body>
   <div id="content">
      <h1>Hello, this will be exported as a PDF!</h1>
      <p>This is some sample content that will be in the PDF.</p>
   </div>

   <button id="exportButton">Export to PDF</button>

   <script>
      function exportHTMLtoPDF() {
         let htmlElement = document.getElementById('content');

         html2pdf().from(htmlElement).save('exported_file.pdf');
      }

      document.getElementById('exportButton').addEventListener('click', exportHTMLtoPDF);
   </script>
</body>
</html>

结论

总之，开发人员可以使用 jsPDF 和 html2pdf.js 方法通过 JavaScript 将 HTML 页面导出为 PDF。在需要精确格式和内容排列的情况下，jsPDF 方法提供了对内容操作的更多控制。另一方面，html2pdf.js 方法提供了一个更简单的解决方案，因为它会自动将 HTML 内容转换为 PDF，并且需要较少的手动干预。开发人员可以根据自己的需求和偏好选择最佳方法。将 HTML 导出为 PDF 的能力使生成打印信息、报表和离线文档成为可能，从而提高了网页的可用性和整体用户体验。

更新于： 2023-08-17

13K+ 浏览量

开启您的 职业生涯

通过完成课程获得认证

立即开始
广告