JSPDF生成横向A4表格PDF教程

来到golang学习网的大家，相信都是编程学习爱好者，希望在这里学习文章相关编程知识。下面本篇文章就来带大家聊聊《JSPDF 生成横向A4 HTML表格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 可将

<!-- 在 HTML 底部引入必要库（确保顺序） -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>

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 是纯文本，无法还原 <select> 选中值、合并单元格（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 文件，可直接打印或分享。

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

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

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。

MicrosoftTeams培训体系搭建方法

上一篇

MicrosoftTeams培训体系搭建方法

下一篇

PHPStorm运行HTML的详细步骤解析

密码登录在这里

微信扫码登录或注册

打开微信扫一扫，快速登录/注册

登录即同意 用户协议 和 隐私政策

微信登录更方便

• 密码登录
• 注册账号

忘记密码

登录

注册

登录即同意 用户协议 和 隐私政策

返回登录

• 重置密码

发送验证码

重置密码