JsPDF中旋转180度的多行居中对齐文本仅渲染首行的问题求助

兄弟，我之前也踩过这个坑！JsPDF自带的text方法在同时处理180度旋转、多行文本和居中对齐的时候，确实有坐标计算的bug——导致后续行要么跑到页面可视区域外，要么被错误定位，所以只显示首行。

给你两个亲测有效的解决办法：

方法一：手动拆分文本逐行绘制 #

先把文本拆分成符合宽度要求的行，然后手动调整每一行的位置——因为180度旋转后，文本的排列方向会反转，我们得反向处理行的偏移：

const description = "你的多行测试文本内容，这里可以替换成实际需要渲染的内容";
const maxWidth = 80;
const lineHeight = doc.internal.getLineHeight();

// 第一步：把文本拆分成符合宽度的多行
const lines = doc.splitTextToSize(description, maxWidth);

// 保存当前绘图状态，避免影响后续的PDF内容
doc.save();

// 平移到目标位置，再旋转180度（顺序很重要！先平移再旋转）
doc.translate(x, y);
doc.rotate(180);

// 计算整个文本块的总高度，用来调整起始位置实现居中
const totalTextHeight = lines.length * lineHeight;
let currentY = -totalTextHeight + lineHeight; // 从文本块底部开始绘制

// 逐行绘制，手动保证每一行居中
lines.forEach(line => {
  const singleLineWidth = doc.getTextWidth(line);
  // 计算居中的x坐标：让行文本在maxWidth范围内居中
  const centeredX = (maxWidth - singleLineWidth) / 2;
  doc.text(line, centeredX, currentY, { maxWidth: maxWidth });
  currentY += lineHeight;
});

// 恢复之前的绘图状态
doc.restore();

方法二：调整旋转原点简化操作 #

这个方法更简洁，核心是先把坐标系原点移到文本块的中心，再旋转180度，这样JsPDF的居中对齐就能正常工作：

const description = "你的多行测试文本内容，这里可以替换成实际需要渲染的内容";
const maxWidth = 80;

// 拆分文本为多行
const lines = doc.splitTextToSize(description, maxWidth);
const lineHeight = doc.internal.getLineHeight();
const totalTextHeight = lines.length * lineHeight;

doc.save();

// 计算文本块的中心坐标：目标位置(x,y)需要调整为文本块的中心
const textCenterX = x - maxWidth / 2;
const textCenterY = y - totalTextHeight / 2;

// 平移到文本块中心，再旋转180度
doc.translate(textCenterX, textCenterY);
doc.rotate(180);

// 直接绘制多行文本，此时align:center会正常生效
doc.text(lines, 0, 0, { maxWidth: maxWidth, align: 'center' });

doc.restore();

为啥原来的代码不行？因为当你直接给text方法传angle:180时，JsPDF的多行布局算法会错误地计算后续行的y坐标——默认多行是向下排列，180度旋转后，这个向下的偏移就变成了向上，直接超出了页面顶部（或者可视区域），所以只有首行能被看到。

备注：内容来源于stack exchange，提问作者CeVR