React中jsPDF html转PDF时文本跨页截断、末尾文字被切如何解决

问题根源 #

jsPDF 自带的html()方法默认分页逻辑是按固定页面高度硬切割渲染完成的画布，不会主动识别DOM元素的内容边界，因此会出现文本行、块级元素被跨页切断、页尾内容截断的问题。

具体修复步骤 #

• 给待渲染HTML中所有不可拆分的元素添加避免断页的CSS规则
  给段落、标题、表格行、图片容器、代码块这类不能从中间拆分的元素加上如下样式，注意不要给最外层根容器加这个样式，只加给最小的不可拆分单元：

  .avoid-break {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  

• 调整PDF生成配置，开启文本优先的自动分页逻辑
  替换原有的生成函数代码，补充分页相关配置，修正内容宽度计算逻辑：

  const generatePDF = () => {
    const pdf = new jsPDF({
      orientation: "p",
      unit: "pt",
      format: "a4",
    });
    const pageWidth = pdf.internal.pageSize.getWidth();
    // 计算扣除左右边距后的实际内容宽度
    const contentWidth = pageWidth - 80 * 2;
  
    pdf
      .html(htmlContent, {
        width: contentWidth,
        windowWidth: 794,
        margin: [58, 80, 52, 80],
        // 核心配置：开启文本模式自动分页，优先按文本块边界切页
        autoPaging: 'text',
        html2canvas: {
          scale: 0.57,
          useCORS: true,
          letterRendering: true,
        },
      })
      .then(() => { 
        pdf.save('test.pdf');
      });
  };
  

适配调优要点 #

• 如果仍有部分块被截断，检查对应元素是否正确添加了avoid-break类，嵌套的块元素只需要给最内层的内容块加类即可，外层容器加会导致分页逻辑异常
• 如果出现页尾文字截断，可微调html2canvas.scale参数，在0.55-0.6区间测试，保证渲染的内容尺寸和PDF页面尺寸换算比例一致
• 待渲染的HTML内容不要给元素设置固定高度+overflow: hidden属性，会导致html2canvas渲染时直接裁掉超出固定高度的内容
• 图片资源要配置跨域允许，否则html2canvas渲染图片失败也会出现内容缺失截断

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