你遇到的问题太常见了——当前你是把整个DOM元素转成一张完整的大图片，再按固定页面高度硬切割分页，这种方式完全不会识别文本段落、块级元素的自然分界，肯定会出现文本行被硬生生截断在两页之间的情况。

下面给你几个实用的解决方案，按省心程度排序：

方案1：改用html2pdf.js（封装工具，自动处理分页） #

html2pdf.js是专门封装了jsPDF+html2canvas的工具，内置了智能分页检测逻辑，能自动避开元素内部的分页截断，在Angular里用起来特别方便：

首先安装依赖：

npm install html2pdf.js --save

然后修改你的服务代码：

import { Injectable } from '@angular/core';
import html2pdf from 'html2pdf.js';

@Injectable({ providedIn: 'root' })
export class PdfService {
  createPdf() {
    const data = document.getElementById('parentdiv');
    const date = new Date();
    
    const opt = {
      margin: 10,
      filename: `Visiometria_${date.getTime()}.pdf`,
      image: { type: 'jpeg', quality: 0.98 },
      html2canvas: { scale: 2 }, // 提升PDF清晰度
      jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' },
      pagebreak: { mode: ['avoid-all', 'css'] } // 核心配置：避免在元素内部分页
    };

    html2pdf().set(opt).from(data).save();
  }
}

这个方案几乎不用自己写逻辑，pagebreak配置会自动识别DOM结构，尽量在段落、卡片等块级元素之间分页，从根源上避免文本截断。

方案2：手动检测元素位置，拆分DOM逐页生成 #

如果不想引入新库，可以自己控制分页逻辑：先计算页面可容纳的内容高度，遍历动态内容的子元素，累计高度，当超过页面阈值时就生成一页PDF，再处理剩余内容。

核心思路是让分页只发生在元素之间，不会拆分单个元素的内容，示例代码如下：

import { Injectable } from '@angular/core';
import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';

@Injectable({ providedIn: 'root' })
export class PdfService {
  async createPdf() {
    const parentDiv = document.getElementById('parentdiv');
    if (!parentDiv) return;

    const date = new Date();
    const doc = new jsPDF('p', 'mm', 'a4');
    const pageWidth = 210;
    const pageHeight = 297;
    const margin = 10;
    const maxContentHeight = pageHeight - margin * 2; // 页面可容纳的净内容高度

    // 克隆原DOM，避免影响页面显示
    const clone = parentDiv.cloneNode(true) as HTMLElement;
    document.body.appendChild(clone);
    clone.style.position = 'absolute';
    clone.style.top = '-9999px';
    clone.style.width = `${pageWidth}mm`; // 匹配PDF页面宽度

    const children = Array.from(clone.children);
    let currentPageContainer = document.createElement('div');
    let currentContentHeight = 0;

    for (const child of children) {
      // 计算当前元素的高度并转换为PDF的mm单位
      const childPixelHeight = child.getBoundingClientRect().height;
      const childMmHeight = (childPixelHeight / window.innerWidth) * pageWidth;

      // 如果添加当前元素会超出页面高度，先生成当前页PDF
      if (currentContentHeight + childMmHeight > maxContentHeight) {
        await this.renderPage(currentPageContainer, doc, margin, pageWidth);
        // 重置当前页容器和高度计数
        currentPageContainer = document.createElement('div');
        currentContentHeight = 0;
      }

      currentPageContainer.appendChild(child.cloneNode(true));
      currentContentHeight += childMmHeight;
    }

    // 处理最后一页剩余内容
    await this.renderPage(currentPageContainer, doc, margin, pageWidth);

    // 清理克隆的DOM元素
    document.body.removeChild(clone);

    doc.save(`Visiometria_${date.getTime()}.pdf`);
  }

  private async renderPage(content: HTMLElement, doc: jsPDF, margin: number, pageWidth: number) {
    const canvas = await html2canvas(content);
    const imgWidth = pageWidth - margin * 2;
    const imgHeight = (canvas.height * imgWidth) / canvas.width;
    const imgData = canvas.toDataURL('image/png');
    
    doc.addImage(imgData, 'PNG', margin, margin, imgWidth, imgHeight);
    doc.addPage();
  }
}

这个方法需要你的动态内容是由独立的块级元素（比如<p>、<div>、卡片组件）组成的，这样分页只会在元素之间进行，不会截断单个元素内的文本。如果是连续长文本，可以先把文本拆分成适合页面高度的段落再处理。

方案3：给关键元素添加CSS分页保护 #

你可以给那些绝对不能被截断的元素添加CSS属性，提示工具尽量在这些元素前后分页：

/* 在组件的CSS文件中添加 */
.no-break {
  page-break-inside: avoid;
  break-inside: avoid;
}

然后给对应的HTML元素加上这个类：

<div id="parentdiv">
  <p class="no-break">这是一段不能被拆分的长文本内容...</p>
  <div class="no-break card">这是一个完整的卡片，不能被截断在两页之间...</div>
</div>

不过这个方法的效果依赖html2canvas的支持程度，有时候不够稳定，建议配合前两个方案一起使用。

总结一下，最省心的是方案1，用封装好的工具一键解决；如果必须用原生的jsPDF+html2canvas，方案2的手动分页逻辑是最可靠的。

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