Node.js使用pdfkit生成PDF时对齐失效及矩形内添加文本问题

一、文本对齐失效的修复 #

常见坑点及解决办法 #

• 顺序搞反了：textAlign必须在text()之前设置，写在后面根本不生效。
• 没指定宽度：对齐是基于文本的边界框，不给width参数的话，单行文本可能看不出对齐效果，尤其是自定义坐标的时候。
• 样式覆盖：如果在设置对齐后又调用了font()、fontSize()这类方法，可能会重置对齐，建议把样式设置都放在对齐之前。

错误 vs 正确代码示例 #

错误代码（对齐无效）：

const PDFDocument = require('pdfkit');
const fs = require('fs');

const doc = new PDFDocument();
doc.pipe(fs.createWriteStream('bad-align.pdf'));

doc.text('想右对齐的文本', 100, 100);
doc.textAlign('right'); // 晚了，没用
doc.end();

正确代码：

const PDFDocument = require('pdfkit');
const fs = require('fs');

const doc = new PDFDocument();
doc.pipe(fs.createWriteStream('good-align.pdf'));

// 先设对齐，再写文本，同时给宽度让对齐生效
doc.textAlign('right');
doc.text('右对齐的文本', 100, 100, { width: 400 });

// 居中对齐示例，用页面宽度减边距当文本宽度
doc.textAlign('center');
doc.text('居中对齐的文本', { width: doc.page.width - 100 });

doc.end();

二、矩形内添加文本的实现 #

PDFKit没有直接的“矩形内嵌文本”功能，手动算坐标就能搞定，步骤如下：

1. 先画矩形，记好它的x、y、宽、高
2. 计算文本的位置：水平对齐靠textAlign+width，垂直对齐靠计算文本高度和矩形高度的差值
3. 把文本的宽度设为矩形宽度，就能让文本自动换行并限制在矩形里

示例代码（矩形内居中单行文本） #

const PDFDocument = require('pdfkit');
const fs = require('fs');

const doc = new PDFDocument();
doc.pipe(fs.createWriteStream('rect-text.pdf'));

// 矩形参数
const rectX = 100;
const rectY = 100;
const rectW = 300;
const rectH = 100;

// 画矩形
doc.rect(rectX, rectY, rectW, rectH).stroke();

// 计算垂直居中的Y坐标
const fontSize = 16;
doc.fontSize(fontSize);
const textH = doc.heightOfString('矩形内居中的文本');
const textY = rectY + (rectH - textH) / 2;

// 居中对齐，文本宽度设为矩形宽度
doc.textAlign('center');
doc.text('矩形内居中的文本', rectX, textY, { width: rectW });

// 多行文本示例（左对齐，矩形内自动换行）
doc.rect(100, 250, 300, 150).stroke();
doc.textAlign('left');
doc.text('这是矩形里的多行文本，设置width为矩形宽度后，内容会自动换行，不会超出矩形范围。你可以随便改textAlign参数换成右对齐或者居中。', rectX, 250 + 20, { width: rectW });

doc.end();

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