将 HTML 表格导出为 PDF：jsPDF 库使用指南-js教程-PHP中文网

将 HTML 表格导出为 PDF：jsPDF 库使用指南

花韻仙語

发布： 2025-07-12 15:30:13

原创

824人浏览过

将 html 表格导出为 pdf：jspdf 库使用指南

本文档旨在指导开发者如何使用 jsPDF 库将 HTML 表格导出为 PDF 文件。我们将详细介绍 jsPDF 的引入方式，并提供完整的代码示例，帮助您解决 "jsPDF is not defined" 错误，最终实现 HTML 表格到 PDF 的转换。同时，我们也会介绍 html2canvas 库的使用，以及一些常见问题的解决方案。

使用 jsPDF 将 HTML 表格导出为 PDF

jsPDF 是一个流行的 JavaScript 库，用于在客户端生成 PDF 文档。它允许您通过 JavaScript 代码创建、修改和保存 PDF 文件。本教程将引导您完成使用 jsPDF 将 HTML 表格导出为 PDF 的过程。

1. 引入 jsPDF 库

首先，您需要在 HTML 文件中引入 jsPDF 库。通常，可以通过 CDN 链接或 npm 安装的方式引入。

立即学习“前端免费学习笔记（深入）”；

CDN 引入方式：

在 HTML 文件的

标签内添加以下代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>

登录后复制

注意： 确保 CDN 链接是最新的版本。如果您仍然遇到 "jsPDF is not defined" 错误，请检查浏览器控制台，确认 CDN 链接是否成功加载。

2. 引入 html2canvas 库

jsPDF 本身不能直接处理 HTML 元素。我们需要借助 html2canvas 库将 HTML 元素渲染成 canvas，然后将 canvas 转换为图片，最后添加到 PDF 文档中。

在 HTML 文件的

标签内添加以下代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

登录后复制

3. 编写 JavaScript 代码

接下来，编写 JavaScript 代码来处理导出 PDF 的逻辑。

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

exportPdfBtn.addEventListener("click", () => {
  // 获取表格 HTML 元素
  const table = document.getElementById("streets-table");

  // 使用 html2canvas 将表格转换为 canvas
  html2canvas(table).then((canvas) => {
    // 创建 jsPDF 实例
    const doc = new jsPDF();

    // 将 canvas 数据作为图片添加到 PDF
    const imgData = canvas.toDataURL("image/png");
    doc.addImage(imgData, "PNG", 10, 10, 180, 0);

    // 保存 PDF 文档
    doc.save("table.pdf");
  });
});

登录后复制

代码解释：

document.getElementById("export-pdf-btn"): 获取导出按钮的 DOM 元素。
document.getElementById("streets-table"): 获取需要导出的 HTML 表格的 DOM 元素。
html2canvas(table).then((canvas) => { ... }): 使用 html2canvas 将表格渲染成 canvas 对象。then() 方法在 canvas 渲染完成后执行。
const doc = new jsPDF();: 创建一个 jsPDF 实例。
canvas.toDataURL("image/png"): 将 canvas 转换为 PNG 格式的 Data URL。
doc.addImage(imgData, "PNG", 10, 10, 180, 0): 将图片添加到 PDF 文档中。参数分别代表：图片数据，图片格式，左边距，上边距，宽度，高度（0 表示自动计算）。
doc.save("table.pdf"): 保存 PDF 文档，文件名为 "table.pdf"。

4. HTML 结构示例

确保您的 HTML 结构包含一个表格和一个导出按钮。




  Export HTML Table to PDF
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>


  
    
      
        Name
        City
      
    
    
      
        John Doe
        New York
      
      
        Jane Smith
        Los Angeles
      
    
  

  

  <script>
    // JavaScript 代码 (见步骤 3)
    const exportPdfBtn = document.getElementById("export-pdf-btn");

    exportPdfBtn.addEventListener("click", () => {
      // 获取表格 HTML 元素
      const table = document.getElementById("streets-table");

      // 使用 html2canvas 将表格转换为 canvas
      html2canvas(table).then((canvas) => {
        // 创建 jsPDF 实例
        const doc = new jsPDF();

        // 将 canvas 数据作为图片添加到 PDF
        const imgData = canvas.toDataURL("image/png");
        doc.addImage(imgData, "PNG", 10, 10, 180, 0);

        // 保存 PDF 文档
        doc.save("table.pdf");
      });
    });
  </script>

Name	City
John Doe	New York
Jane Smith	Los Angeles

登录后复制

5. 解决 "jsPDF is not defined" 错误

如果遇到 "jsPDF is not defined" 错误，请按照以下步骤进行排查：

检查 CDN 链接： 确认 CDN 链接是否正确，并且可以成功加载。可以在浏览器控制台中查看网络请求，确认 jsPDF 库是否被成功下载。
检查 script 标签位置： 确保 <script> 标签在 HTML 文件的 <head> 或 <body> 标签内，并且在 JavaScript 代码之前。</script>
检查变量名冲突： 检查您的代码中是否定义了与 jsPDF 冲突的变量名。

6. 注意事项和总结

html2canvas 的渲染效果可能与原始 HTML 样式略有差异。如果需要更精确的样式控制，可以考虑使用 jsPDF 的绘图 API 手动绘制表格。
如果表格内容过多，可能会导致 PDF 文件过大。可以考虑分页处理，或者使用 jsPDF 的压缩功能。
jsPDF 和 html2canvas 的版本更新可能会影响代码的兼容性。建议定期更新库，并测试代码的兼容性。
确保您的 HTML 结构正确，并且表格的 ID 与 JavaScript 代码中使用的 ID 一致。

通过以上步骤，您应该能够成功使用 jsPDF 库将 HTML 表格导出为 PDF 文件。如果遇到任何问题，请仔细检查代码和配置，并参考 jsPDF 和 html2canvas 的官方文档。

以上就是将 HTML 表格导出为 PDF：jsPDF 库使用指南的详细内容，更多请关注php中文网其它相关文章！