jsPDF 2.4.0版本html()方法autoPaging参数作用咨询

autoPaging 并不是用于实现「第1页/共2页」这类页码功能的配置项。

核心用途 #

autoPaging 是用来控制HTML内容超出单页PDF边界时的自动分页逻辑，避免内容直接被截断丢失，它有3个常用可选值：

• 'text'：仅对文本内容做智能分页，会自动计算行高，避免单行文本被切割到上下两页中
• 'slice'：对所有类型的内容做一刀切的切片分页，不做内容适配，可能出现图片、表格、块级元素被半页截断的问题
• false：默认值，关闭自动分页能力，所有超出单页边界的内容会直接被裁剪，不会自动生成额外页面承载溢出内容

配置后无变化的常见原因 #

你使用后没有看到明显效果，通常是两种情况导致的：

1. 你传入待转换的HTML内容本身长度较短，未超出单页PDF的可绘制区域，不会触发分页逻辑，自然看不到配置生效的差异
2. 你没有显式指定autoPaging的非默认值，默认false等价于关闭该能力，和不配置效果一致

页码功能实现方式 #

如果需要添加「第x页/共y页」的页码，需要你手动编写逻辑实现，参考示例代码如下：

import jsPDF from 'jspdf';

const generatePdf = async () => {
  const doc = new jsPDF('p', 'mm', 'a4');
  const pageWidth = doc.internal.pageSize.getWidth();
  const pageHeight = doc.internal.pageSize.getHeight();

  // 转换HTML内容，开启自动分页
  await doc.html(document.getElementById('target-content'), {
    autoPaging: 'text',
    x: 10,
    y: 10,
    width: pageWidth - 20,
    windowWidth: 794 // A4纸宽度对应的像素值，可按需调整
  });

  // 批量添加页码
  const totalPage = doc.getNumberOfPages();
  for (let i = 1; i <= totalPage; i++) {
    doc.setPage(i);
    doc.setFontSize(10);
    // 在页面底部居中位置绘制页码
    doc.text(`第${i}页 / 共${totalPage}页`, pageWidth / 2, pageHeight - 10, { align: 'center' });
  }

  doc.save('导出文件.pdf');
}

内容的提问来源于stack exchange，提问作者Shweta Kumari