Angular14+pptxgenjs v3.11实现动态高度与Y轴的文本列表追加

核心问题原因 #

循环调用slide.addText()时，默认Y坐标为0且高度固定，导致文本重叠；服务器返回的动态文本无法预设高度，浏览器Canvas计算的字符宽度/行数与PPT渲染规则不一致，导致高度计算不准确。

解决方案 #

利用pptxgenjs自带的文本框自动高度适配功能，结合两种实现方式解决：

方式1：独立文本框+动态跟踪Y坐标 #

适合需要每个文本独立样式、动画或单独调整的场景：

import pptxgen from 'pptxgenjs';

// 初始化PPT与幻灯片
const ppt = new pptxgen();
const slide = ppt.addSlide();

// 初始Y坐标（从页面顶部0.5英寸开始，可自定义）
let currentY = 0.5;
// 文本间的间距（可选，按需调整）
const textGap = 0.2;
// 基础文本样式
const baseStyle = {
  fontFace: 'Arial',
  fontSize: 12,
  color: '#333',
  textWrapping: 'wrap', // 强制文本换行
  autoFit: true // 开启自动高度适配
};

// 模拟服务器返回的动态文本列表
const dynamicTexts = [
  '这是一段较长的测试文本，内容足够多会自动换行，验证高度计算是否准确',
  '短文本示例',
  '另一段超长文本：Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
];

dynamicTexts.forEach(text => {
  // 添加文本框，指定固定宽度、当前Y坐标
  const textBox = slide.addText(text, {
    x: 0.5, // 左侧边距
    y: currentY,
    w: 8, // 固定宽度，确保文本能换行
    ...baseStyle
  });

  // 获取pptxgenjs自动计算的文本框实际高度
  const boxHeight = textBox.height;

  // 更新下一个文本框的Y坐标：当前Y + 文本框高度 + 间距
  currentY += boxHeight + textGap;
});

// 导出PPT
ppt.writeFile('动态独立文本列表.pptx').then(() => {
  console.log('PPT生成完成');
});

方式2：单文本框+多段落（更简洁） #

适合所有文本样式统一、无需独立文本框的场景，无需手动跟踪Y坐标：

import pptxgen from 'pptxgenjs';

const ppt = new pptxgen();
const slide = ppt.addSlide();

// 模拟服务器动态文本
const dynamicTexts = ['文本1', '较长的文本内容会自动换行显示', '文本3'];

// 将文本转为段落数组
const paragraphs = dynamicTexts.map(text => ({
  text,
  options: {
    fontFace: 'Arial',
    fontSize: 12,
    color: '#333',
    margin: 0.1 // 段落间的间距（可选）
  }
}));

// 添加单个文本框，自动适配所有段落高度
slide.addText(paragraphs, {
  x: 0.5,
  y: 0.5,
  w: 8,
  textWrapping: 'wrap',
  autoFit: true
});

ppt.writeFile('动态段落文本列表.pptx').then(() => {
  console.log('PPT生成完成');
});

关键注意事项 #

1. 必须设置固定宽度w：只有固定宽度下，文本才会自动换行，autoFit才能正确计算高度。
2. 优先使用pptxgenjs内置计算：避免用Canvas估算，PPT的字体渲染规则（行高、字符间距）与浏览器Canvas存在差异，内置计算更准确。
3. autoFit属性：在v3.11.0版本中，该属性会自动调整文本框高度以适配内容，对应PPT原生的"自动调整大小"功能。

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