我之前也踩过类似的坑，page-break-after不生效通常是页面元素的布局属性干扰了分页逻辑，再加上默认打印预览没法直接触发下载，下面给你两个可行的解决方案：

方案一：修复CSS分页逻辑 + 优化打印体验 #

先解决分页不生效的问题，再通过JS简化下载流程（部分浏览器支持直接将打印输出保存为PDF）

1. 调整CSS打印样式 #

首先确保你的表格没有被浮动、绝对定位或溢出隐藏的容器包裹，然后添加打印专属样式：

/* 仅在打印场景生效的样式 */
@media print {
  /* 隐藏页面上不需要打印的元素 */
  body > *:not(.print-table) {
    display: none;
  }

  /* 给每个表格强制添加分页符 */
  .print-table {
    page-break-after: always;
    /* 避免表格被拆分到两页 */
    page-break-inside: avoid;
    width: 100%;
  }

  /* 最后一个表格不需要尾随分页符 */
  .print-table:last-child {
    page-break-after: avoid;
  }
}

给你的5个表格都加上print-table类名，这样打印时只会显示目标表格，且每个表格后自动分页。

2. 用JS触发打印（简化下载步骤） #

利用浏览器打印API，用户在弹出的打印面板中选择“保存为PDF”即可完成下载：

const downloadBtn = document.getElementById('download-btn');

downloadBtn.addEventListener('click', () => {
  // 直接触发打印流程，引导用户选择保存为PDF
  window.print();
});

如果想要完全跳过打印预览直接自动下载，推荐方案二。

方案二：用JS库直接生成PDF（推荐） #

使用jsPDF结合html2canvas或jsPDF-autotable，可以直接将每个表格单独生成一页PDF并触发下载，完全绕过浏览器打印预览。

方法A：jsPDF + html2canvas（适配复杂样式表格） #

这个方法把表格转为高清图片后逐页添加到PDF，能保留大部分自定义CSS样式：

// 可通过npm安装或下载本地库引入
// import { jsPDF } from 'jspdf';
// import html2canvas from 'html2canvas';

const downloadBtn = document.getElementById('download-btn');

downloadBtn.addEventListener('click', async () => {
  const { jsPDF } = window.jspdf;
  const pdf = new jsPDF('p', 'mm', 'a4'); // 纵向A4纸规格
  const tables = document.querySelectorAll('.print-table');

  for (let i = 0; i < tables.length; i++) {
    const table = tables[i];
    // 将表格转为高清canvas
    const canvas = await html2canvas(table, {
      scale: 2, // 放大2倍保证清晰度
      backgroundColor: '#ffffff' // 确保背景色正常渲染
    });
    const imgData = canvas.toDataURL('image/png');

    // 计算图片适配页面的尺寸（左右各留10mm边距）
    const pageWidth = pdf.internal.pageSize.getWidth();
    const imgWidth = pageWidth - 20;
    const imgHeight = (canvas.height * imgWidth) / canvas.width;

    // 非第一页时添加新页面
    if (i > 0) pdf.addPage();

    // 将图片插入PDF
    pdf.addImage(imgData, 'PNG', 10, 10, imgWidth, imgHeight);
  }

  // 触发PDF下载
  pdf.save('tables-separate-pages.pdf');
});

方法B：jsPDF-autotable（适合结构化表格，文字可复制） #

如果你的表格是标准的<thead>+<tbody>结构，用这个插件生成的PDF文字可选中，文件体积更小：

// 可通过npm安装或下载本地库引入
// import { jsPDF } from 'jspdf';
// import 'jspdf-autotable';

const downloadBtn = document.getElementById('download-btn');

downloadBtn.addEventListener('click', () => {
  const { jsPDF } = window.jspdf;
  const pdf = new jsPDF('p', 'mm', 'a4');
  const tables = document.querySelectorAll('.print-table');

  tables.forEach((table, index) => {
    // 非第一页时添加新页面
    if (index > 0) pdf.addPage();
    // 从DOM表格直接生成PDF表格
    pdf.autoTable({
      html: table,
      startY: 10, // 顶部留10mm边距
      styles: { fontSize: 10, cellPadding: 3 },
      theme: 'striped' // 可选表格主题（还有plain、grid）
    });
  });

  pdf.save('tables-separate-pages.pdf');
});

关键注意事项 #

• 方案一的CSS分页失效时，检查表格父容器是否有overflow: hidden、float或position: absolute，这些属性会破坏分页逻辑
• 方案二的JS库方法中，html2canvas对部分复杂CSS（如阴影、渐变）支持有限，需要适当调整样式适配
• 测试时优先使用Chrome、Firefox等现代浏览器，兼容性更好

内容的提问来源于stack exchange，提问作者Mikkel Nurfalah