如何使用 jsPDF 将 HTML 表格导出为横向 A4 PDF 文件

本文介绍如何基于现有动态课表（html + javascript），通过 jspdf 库实现一键导出为横向（landscape）a4 格式的 pdf，包含页面方向设置、表格内容准确渲染及实用注意事项。

在构建无纸化课表系统时，将 HTML 表格导出为高质量、可打印的 PDF 是关键一步。虽然你已实现 CSV 导出，但直接用 jsPDF.text() 渲染 CSV 字符串（如 pdf.text(csv, 10, 10)）会导致格式混乱、换行错位、无法保留表格结构——这并非真正的“表格导出”，而只是纯文本快照。

要真正导出结构清晰、适配横向 A4 的课表 PDF，推荐采用以下专业方案：

✅ 正确做法：使用 html2canvas + jsPDF 组合渲染 DOM 表格

jsPDF 本身不支持直接解析 HTML 表格，但结合 html2canvas 可将

function exportPDF() {
  const table = document.getElementById("timetable");

  // 配置 html2canvas：确保样式完整、字体抗锯齿、缩放适配
  html2canvas(table, {
    scale: 2,                    // 提升截图清晰度（2x 像素密度）
    useCORS: true,               // 允许跨域资源（如图标字体）
    logging: false,
    scrollY: -window.scrollY,    // 修复滚动偏移
    width: table.scrollWidth,    // 确保宽表完整截取
    height: table.scrollHeight
  }).then(canvas => {
    const imgData = canvas.toDataURL("image/png");
    const pdf = new jspdf.jsPDF('l', 'mm', 'a4'); // ← 关键：'l' = landscape

    // 计算缩放比例，使表格完整适应横向 A4（297×210 mm）
    const pdfWidth = pdf.internal.pageSize.getWidth();
    const pdfHeight = pdf.internal.pageSize.getHeight();
    const imgWidth = pdfWidth - 20; // 左右留白 10mm
    const imgHeight = (canvas.height * imgWidth) / canvas.width;

    // 添加图片（居中、带边距）
    pdf.addImage(imgData, 'PNG', 10, 10, imgWidth, imgHeight);
    pdf.save('timetable-landscape.pdf');
  }).catch(err => {
    console.error("PDF 导出失败：", err);
    alert("导出 PDF 失败，请检查控制台错误信息。");
  });
}

⚠️ 注意事项与优化建议

• 避免 pdf.text(csv, ...) 方式：CSV 是纯文本，无法还原 选中值、合并单元格（colSpan）、CSS 样式（如背景色、边框），且横向排版极易溢出。
• addPage('a4','l') ≠ 自动适配表格：该方法仅设置新页方向，不解决内容布局问题；必须配合 html2canvas 或 pdfmake 等支持 HTML 结构的方案。
• 字体中文支持：若课表含中文姓名（如 "Khalfi" 后可能有中文备注），需为 jsPDF 注册 UTF-8 字体（推荐 pdfmake 更易处理）：

  // 使用 pdfmake（更推荐用于复杂表格）
  const docDefinition = {
    pageOrientation: 'landscape',
    content: [
      { table: { 
          body: /* 从 DOM 动态提取二维数组数据 */ 
        } 
      }
    ]
  };
  pdfMake.createPdf(docDefinition).download('timetable.pdf');

• 性能提示：课表含 15 行 × 21 列（含表头），截图耗时约 300–800ms，建议添加加载提示：

  document.getElementById("download-pdf-button").disabled = true;
  document.getElementById("download-pdf-button").textContent = "正在生成...";
  // ...导出完成后恢复按钮

✅ 最终效果

点击「Télécharger en PDF」按钮后，浏览器将下载一个严格横向 A4、保留原始颜色/边框/文字对齐、完整显示所有列的 PDF 文件，可直接打印或分享。

Dora

创建令人惊叹的3D动画网站，无需编写一行代码。

下载

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

? 小技巧：导出前可临时为 #timetable 添加 @media print { @page { size: landscape; } }，方便用户直接使用浏览器「打印→另存为 PDF」作为备用方案。

通过以上方案，你不仅能解决当前的横向 PDF 导出难题，还为后续扩展（如按教师筛选导出、添加页眉页脚、密码保护）打下坚实基础。