使用html2pdf库实现多页PDF表格表头每页重复显示的方法求助

问题描述 #

我现在用html2pdf库把HTML表格转成PDF，但是表格跨了好几页，表头却只在第一页显示，怎么才能让表头在每一页都重复出现呀？麻烦各位大佬给点建议或者帮忙解决一下，万分感谢！

我的代码 #

function saveAsPdf() {
    var selMonth = $('#monthsListView').val();
    var selYear = $('#yearsListView').val();

    setTimeout(function () {
        // Use html2pdf to convert HTML content to PDF
        html2pdf(combinedTableDiv, {
            margin: 10,
            filename: 'OutsiderAttendance' + selMonth +'/' +selYear + '.pdf', // Corrected filename
            image: { type: 'jpeg', quality: 0.98 },
            html2canvas: { scale: 2 },
            jsPDF: { unit: 'mm', format: 'a4', orientation: 'landscape' },
             pagebreak: { mode: ['avoid-all', 'css', 'legacy'] }
        }).then(function (pdf) {
            // Save the PDF...（原代码未写完）
        });
    });
}

解决方案 #

嘿，我之前也碰到过这个问题！html2pdf本身其实没有直接支持表头重复的配置，但我们可以通过结合CSS和一些小技巧来实现，给你几个可行的方法：

• 方法一：利用CSS的position: sticky属性
  这是最简单的方式，给你的表格表头（<thead>里的<tr>或者<th>）加上sticky定位，让它在生成PDF分页时固定在顶部。需要注意的是，要给表格设置正确的CSS，同时确保html2canvas能识别这个属性。
  示例CSS：

  table {
      width: 100%;
      border-collapse: collapse;
  }
  thead tr {
      position: sticky;
      top: 0;
      background: white; /* 一定要加背景色，不然会被下面的内容穿透 */
  }
  

  新版本的html2canvas一般都能识别sticky属性，直接添加这个CSS后重新生成PDF试试。

• 方法二：手动在每页插入表头（适合复杂场景）
  如果sticky的方式不生效，我们可以借助jsPDF的API手动处理。思路是先获取表头的HTML内容，然后在每一页创建时把表头绘制到页面顶部：
  修改后的代码示例：

  function saveAsPdf() {
      var selMonth = $('#monthsListView').val();
      var selYear = $('#yearsListView').val();
      var headerHtml = $('thead').prop('outerHTML'); // 获取完整的表头HTML
  
      setTimeout(function () {
          html2pdf(combinedTableDiv, {
              margin: 10,
              filename: 'OutsiderAttendance' + selMonth +'/' +selYear + '.pdf',
              image: { type: 'jpeg', quality: 0.98 },
              html2canvas: { scale: 2 },
              jsPDF: { unit: 'mm', format: 'a4', orientation: 'landscape' },
              pagebreak: { mode: ['avoid-all', 'css', 'legacy'] },
              // 监听页面添加事件，插入表头
              onPageAdded: function(pdf, pageNumber) {
                  // 将表头HTML转为canvas
                  html2canvas($(headerHtml)[0], { scale: 2 }).then(function(canvas) {
                      var imgData = canvas.toDataURL('image/jpeg', 0.98);
                      var pageWidth = pdf.internal.pageSize.getWidth();
                      var imgWidth = pageWidth - 20; // 减去左右margin（和配置里的margin一致）
                      var imgHeight = (canvas.height * imgWidth) / canvas.width;
                      // 在页面顶部绘制表头
                      pdf.addImage(imgData, 'JPEG', 10, 10, imgWidth, imgHeight);
                  });
              }
          }).then(function (pdf) {
              // 这里可以补充保存PDF的逻辑
          });
      });
  }
  

  注意要调整表头的位置和尺寸，避免和正文内容重叠，确保margin的数值和配置里的一致。

• 方法三：使用CSS的table-header-group属性
  这是CSS原生支持表格表头重复的属性，只要你的表格是标准的<table>结构（包含<thead>和<tbody>），可以试试添加这个CSS：

  thead {
      display: table-header-group;
  }
  

  有些情况下html2pdf会识别这个属性自动重复表头，不过如果你的表格结构不标准（比如用div模拟表格），这个方法就不生效啦。

备注：内容来源于stack exchange，提问作者Omkar Nikam