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

将HTML表格导出为PDF：使用jsPDF库的完整教程

霞舞

发布： 2025-07-12 15:42:01

原创

796人浏览过

将html表格导出为pdf：使用jspdf库的完整教程

本文档详细介绍了如何使用jsPDF库将HTML表格导出为PDF文件。我们将解决常见的“jsPDF is not defined”错误，并提供一个可行的解决方案，包括必要的依赖项、代码示例和注意事项，助你轻松实现HTML表格到PDF的转换。

准备工作

要使用jsPDF将HTML表格导出为PDF，你需要以下依赖项：

jsPDF: 用于创建和操作PDF文档的核心库。
html2canvas: 用于将HTML元素渲染成canvas图像，以便jsPDF可以将其添加到PDF中。

请确保在你的HTML文件中包含以下CDN链接：

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

登录后复制

注意: <script> 标签必须位于 </body> 标签之前，以确保在执行 JavaScript 代码之前加载所有 HTML 元素。

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

实现步骤

以下是一个将HTML表格导出为PDF的完整示例：

HTML结构: 创建一个包含表格的HTML结构，并为表格指定一个唯一的ID。

启科网络PHP商城系统

启科网络商城系统由启科网络技术开发团队完全自主开发，使用国内最流行高效的PHP程序语言，并用小巧的MySql作为数据库服务器，并且使用Smarty引擎来分离网站程序与前端设计代码，让建立的网站可以自由制作个性化的页面。系统使用标签作为数据调用格式，网站前台开发人员只要简单学习系统标签功能和使用方法，将标签设置在制作的HTML模板中进行对网站数据、内容、信息等的调用，即可建设出美观、个性的网站。

查看详情

<!DOCTYPE html>
<html>
<head>
  <title>Export HTML Table to PDF</title>
</head>
<body>
  <table id="myTable">
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Row 1, Cell 1</td>
        <td>Row 1, Cell 2</td>
      </tr>
      <tr>
        <td>Row 2, Cell 1</td>
        <td>Row 2, Cell 2</td>
      </tr>
    </tbody>
  </table>

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

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
  <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
  <script>
    const exportButton = document.getElementById("exportButton");

    exportButton.addEventListener("click", () => {
      // 获取表格元素
      const table = document.getElementById("myTable");

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

        // 将canvas转换为图像数据
        const imgData = canvas.toDataURL("image/png");

        // 将图像添加到PDF
        pdf.addImage(imgData, "PNG", 0, 0, pdf.internal.pageSize.getWidth(), 0);

        // 保存PDF
        pdf.save("table.pdf");
      });
    });
  </script>
</body>
</html>

登录后复制

JavaScript代码: 编写JavaScript代码，该代码将在点击按钮时触发，并将HTML表格导出为PDF。

const exportButton = document.getElementById("exportButton");

exportButton.addEventListener("click", () => {
  // 获取表格元素
  const table = document.getElementById("myTable");

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

    // 将canvas转换为图像数据
    const imgData = canvas.toDataURL("image/png");

    // 将图像添加到PDF
    pdf.addImage(imgData, "PNG", 0, 0, pdf.internal.pageSize.getWidth(), 0);

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

登录后复制

常见问题与解决方案

问题: "Uncaught ReferenceError: jsPDF is not defined"

原因: 浏览器无法识别 jsPDF 对象，通常是因为jsPDF库没有正确加载。

解决方案:

检查CDN链接: 确保在HTML文件中正确包含了jsPDF的CDN链接，并且链接地址是有效的。
脚本加载顺序: 确保在你的JavaScript代码之前加载了jsPDF库。通常，将<script>标签放在 </body> 标签之前可以解决这个问题。
检查网络连接: 确认你的网络连接正常，可以访问CDN服务器。
模块化环境: 如果你使用模块化环境（如Webpack或Parcel），请确保正确导入jsPDF库。

代码解释

html2canvas(table): 将HTML表格渲染成一个canvas元素。
canvas.toDataURL("image/png"): 将canvas转换为PNG格式的图像数据URL。
new jsPDF(): 创建一个新的jsPDF实例。
pdf.addImage(imgData, "PNG", 0, 0, pdf.internal.pageSize.getWidth(), 0): 将图像数据添加到PDF文档中。参数解释：
- imgData: 图像数据URL。
- "PNG": 图像格式。
- 0, 0: 图像在PDF中的起始坐标（左上角）。
- pdf.internal.pageSize.getWidth(): PDF页面的宽度，用于自动调整图像宽度。
- 0: 自动计算图像高度，保持宽高比。
pdf.save("table.pdf"): 将PDF文档保存为名为 "table.pdf" 的文件。

注意事项

样式问题: html2canvas 的渲染效果可能与原始HTML表格的样式略有不同。复杂的CSS样式可能无法完全准确地转换。建议尽量使用简单的CSS样式，或者在导出前对表格样式进行调整。
分页: 如果表格内容过多，可能会超出单个PDF页面。你需要使用jsPDF的分页功能来将表格分割到多个页面。
中文支持: jsPDF默认不支持中文。你需要使用字体嵌入或其他方式来支持中文。
错误处理: 建议添加错误处理机制，例如使用 try...catch 块来捕获可能出现的异常，并向用户显示友好的错误信息。