首页 > 文章 > 前端

JSPDF导出HTML表格为PDF方法

时间：2025-07-13 13:03:31 157浏览收藏

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《JSPDF导出HTML表格为PDF教程》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

使用 jsPDF 导出 HTML 表格为 PDF 的教程

本文将指导你如何使用 jsPDF 库将 HTML 表格导出为 PDF 文件。我们将解决常见的 jsPDF is not defined 错误，并提供完整的代码示例，帮助你顺利实现表格导出功能。核心在于正确引入 jsPDF 和 html2canvas 库，并使用它们将 HTML 表格转换为 PDF 文档。

准备工作

要使用 jsPDF 将 HTML 表格导出为 PDF，你需要以下几个步骤：

引入 jsPDF 库： jsPDF 是一个客户端 JavaScript 库，用于生成 PDF 文档。你可以通过 CDN 链接或 npm 安装引入它。
引入 html2canvas 库： html2canvas 是一个 JavaScript 库，用于将 HTML 元素渲染成 canvas 图像。由于 jsPDF 无法直接处理 HTML 元素，我们需要使用 html2canvas 将表格转换为图像，然后再将其添加到 PDF 文档中。

引入 jsPDF 和 html2canvas

最常见的问题是 jsPDF is not defined 错误，这通常是因为 jsPDF 库没有正确引入。确保在 HTML 文件中正确引入 jsPDF 和 html2canvas 库。

<!DOCTYPE html>
<html>
<head>
  <title>Export HTML Table to PDF</title>
  <!-- jsPDF CDN -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
  <!-- html2canvas CDN -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
</head>
<body>
  <!-- Your HTML Table -->
  <table id="streets-table">
    <thead>
      <tr>
        <th>Name</th>
        <th>City</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John Doe</td>
        <td>New York</td>
      </tr>
      <tr>
        <td>Jane Smith</td>
        <td>Los Angeles</td>
      </tr>
    </tbody>
  </table>

  <!-- Export Button -->
  <button id="export-pdf-btn">Export to PDF</button>

  <script>
    const exportPdfBtn = document.getElementById("export-pdf-btn");

    exportPdfBtn.addEventListener("click", () => {
      // Create a new jsPDF instance
      const { jsPDF } = window.jspdf;
      const doc = new jsPDF();

      // Get the table HTML element
      const table = document.getElementById("streets-table");

      html2canvas(table).then((canvas) => {
        // Get the canvas data as an image URL
        const imgData = canvas.toDataURL("image/png");

        // Add the image to the PDF
        doc.addImage(imgData, "PNG", 10, 10, 180, 0);

        // Save the PDF document
        doc.save("table.pdf");
      });
    });
  </script>
</body>
</html>

解释：

我们使用 CDN 链接引入了 jsPDF 和 html2canvas 库。
确保这些