Angular4中实现长内容自动分页至新<md-card-content>的方法

嘿，我来帮你搞定这个类似Word分页的需求！你现在的问题是用max-height只能截断内容，但没法自动生成新的卡片容器。咱们可以通过动态计算内容高度并拆分内容，然后循环渲染多个md-card-content来实现这个效果。

核心思路 #

1. 等DOM渲染完成后，计算内容在指定高度下能容纳的部分
2. 将长内容拆分成多个符合高度限制的片段
3. 用*ngFor循环渲染每个片段对应的md-card-content容器，并且只在最后一页显示签名部分

具体实现步骤 #

1. 组件类逻辑（处理内容拆分） #

首先在你的组件里添加视图引用和分页逻辑，我们用ngAfterViewInit确保DOM已经渲染完成，再进行内容拆分：

import { Component, AfterViewInit, ElementRef, ViewChild } from '@angular/core';

@Component({
  selector: 'your-component-selector',
  templateUrl: './your-component.html',
  styleUrls: ['./your-component.css']
})
export class YourMailComponent implements AfterViewInit {
  @ViewChild('mailContent') mailContent!: ElementRef;
  mail_number = 'MAIL-12345';
  created_at = new Date();
  content = '这里替换成你的长邮件内容...';
  sender = 'John Doe';
  pages: string[] = [];

  ngAfterViewInit(): void {
    this.splitContentIntoPages();
  }

  private splitContentIntoPages(): void {
    const innerContainer = this.mailContent.nativeElement;
    // 20cm转成精确的px值（1cm ≈ 37.795px）
    const maxPageHeight = 20 * 37.795;
    const tempContainer = document.createElement('p');
    // 复制.inner的样式，确保计算高度准确
    Object.assign(tempContainer.style, {
      ...getComputedStyle(innerContainer),
      visibility: 'hidden',
      position: 'absolute',
      top: '-9999px',
      left: '-9999px'
    });
    document.body.appendChild(tempContainer);

    let currentPageText = '';
    // 按空格拆分内容（如果需要更精准可以按字符拆分）
    const contentWords = this.content.split(' ');

    for (const word of contentWords) {
      // 临时添加当前单词，检查高度是否超限
      tempContainer.textContent = `${currentPageText} ${word}`.trim();
      if (tempContainer.offsetHeight > maxPageHeight) {
        // 高度超限，保存当前页内容，开始新页面
        this.pages.push(currentPageText.trim());
        currentPageText = word;
      } else {
        // 高度未超限，继续添加内容
        currentPageText += ` ${word}`;
      }
    }

    // 添加最后一页的剩余内容
    if (currentPageText.trim()) {
      this.pages.push(currentPageText.trim());
    }

    // 清理临时容器
    document.body.removeChild(tempContainer);
  }
}

2. 修改HTML模板（动态渲染分页） #

把原来的单个md-card-content改成循环渲染，并且只在最后一页显示签名：

<!-- 循环渲染每个分页的卡片 -->
<md-card-content *ngFor="let page of pages; let isLastPage = last">
  <div fxLayout="row" fxLayoutAlign="center center" class="mt-1">
    <div class="template">
      <p class="head">Mail Number: {{mail_number}}</p>
      <br>
      <p class="head">Date: {{created_at| date:'yyyy MMM dd'}}</p>
      <!-- 渲染当前页的内容 -->
      <p class="inner" #mailContent>{{page}}</p>
      <!-- 只在最后一页显示签名 -->
      <p class="sign" *ngIf="isLastPage">Sincerely</p><br>
      <p class="sign" *ngIf="isLastPage">{{sender}}</p>
    </div>
  </div>
</md-card-content>

3. 调整CSS样式 #

去掉.inner的max-height（因为我们已经通过逻辑控制内容高度了），确保每个页面的样式一致：

.template{
  width: 600px;
  height: 1100px;
  border-width: 2px;
  border-style: solid;
  border-color: #e6e6e6;
  padding-top: 23mm;
  padding-left: 2cm;
  padding-right: 2.5cm;
}
p.head{
  line-height: 0.5px;
  padding-left: 120mm;
  font-size: 3;
}
p{
  line-height: 25px;
  word-spacing:1px;
}
.inner{
  text-align: justify;
  padding-top: 21mm;
  padding-bottom: 10mm;
  white-space: pre-wrap;
  width: 166mm;
  word-wrap: break-word;
  /* 移除max-height，由分页逻辑控制内容高度 */
}
p.sign{
  padding-left: 10mm;
  line-height: 0.5px;
}

优化提示 #

如果你的内容包含复杂格式（比如换行、加粗、列表），上面按单词拆分的方法可能不够精准。可以改用Range API来更精确地定位拆分点，比如：

private splitContentIntoPages(): void {
  const innerContainer = this.mailContent.nativeElement;
  const maxPageHeight = 20 * 37.795;
  const range = document.createRange();
  let currentContent = '';
  let currentNode = innerContainer.firstChild;

  while (currentNode) {
    range.setStart(currentNode, 0);
    range.setEnd(currentNode, currentNode.textContent.length);
    const nodeRect = range.getBoundingClientRect();
    const containerTop = innerContainer.getBoundingClientRect().top;

    if (nodeRect.bottom - containerTop > maxPageHeight) {
      // 逐字符查找拆分点
      let splitIndex = 0;
      while (splitIndex < currentNode.textContent.length) {
        range.setStart(currentNode, splitIndex);
        range.setEnd(currentNode, splitIndex + 1);
        const tempRect = range.getBoundingClientRect();
        if (tempRect.bottom - containerTop > maxPageHeight) break;
        splitIndex++;
      }
      currentContent += currentNode.textContent.substring(0, splitIndex);
      this.pages.push(currentContent.trim());
      currentContent = currentNode.textContent.substring(splitIndex);
    } else {
      currentContent += currentNode.textContent;
    }
    currentNode = currentNode.nextSibling;
  }

  if (currentContent.trim()) this.pages.push(currentContent.trim());
}

这个方法会逐字符检查高度，适合包含复杂排版的内容。

内容的提问来源于stack exchange，提问作者fariba.j