登录注册

当前位置：首页 > 文章列表 > 文章 > 前端 > JSPDF生成横向A4表格PDF教程

JSPDF生成横向A4表格PDF教程

2026-01-01 22:15:42 0浏览 收藏

来到golang学习网的大家，相信都是编程学习爱好者，希望在这里学习文章相关编程知识。下面本篇文章就来带大家聊聊《JSPDF 生成横向A4 HTML表格PDF教程》，介绍一下，希望对大家的知识积累有所帮助，助力实战开发！

如何使用 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 可将

截图为高清 Canvas 图像，再插入 PDF 中，并强制设为横向布局：




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 是纯文本，无法还原
    忘记密码
    登录即同意 用户协议 和 隐私政策
    返回登录
    • 重置密码
    发送验证码