如何使用PdfKit实现续接文本的居中对齐？

你当前的代码里，"Item "和页码的组合因为固定了起始X坐标，当页码位数从1位增加到3位时，整体文本长度变化，导致无法保持居中。要解决这个问题，我们可以通过计算文本总宽度动态确定起始位置，确保组合文本始终居中。

修改后的代码示例 #

const PDFDocument = require("pdfkit");
const QRCode = require("qrcode");
const fs = require("fs");

const exec = async () => {
  const doc = new PDFDocument({ layout: "landscape" });
  doc.pipe(fs.createWriteStream("output.pdf"));
  const pageWidth = doc.page.width; // 获取横向页面宽度（landscape模式下默认是792）
  const itemY = 200; // 固定文本的Y坐标

  for (let pageNumber = 1; pageNumber <= 1000; pageNumber++) {
    const url = await QRCode.toDataURL("I am a url!");

    doc.image(url, 10, 100, {
      width: 420,
      height: 420,
      align: "center",
      valign: "center",
    });

    // 计算"Item "的宽度（先匹配对应样式）
    doc.font("Helvetica").fontSize(50).fillColor("#000");
    const itemTextWidth = doc.widthOfString("Item ");

    // 计算页码文本的宽度（匹配对应样式）
    doc.font("Courier-Bold").fontSize(55).fillColor("#1b83c5");
    const pageNumWidth = doc.widthOfString(`${pageNumber}`);

    // 计算整体文本的居中起始X坐标
    const totalWidth = itemTextWidth + pageNumWidth;
    const startX = (pageWidth - totalWidth) / 2;

    // 绘制续接文本：从居中X坐标开始，先画"Item "再续接页码
    doc
      .font("Helvetica")
      .fontSize(50)
      .fillColor("#000")
      .text(`Item `, startX, itemY, { continued: true })
      .fontSize(55)
      .font("Courier-Bold")
      .fillColor("#1b83c5")
      .text(`${pageNumber}`);

    // 同样处理"Order and Pay"的居中
    doc.font("Helvetica-Bold").fontSize(40).fillColor("#000");
    const orderTextWidth = doc.widthOfString("Order and Pay");
    const orderStartX = (pageWidth - orderTextWidth) / 2;
    doc.text("Order and Pay", orderStartX, 320);

    doc.addPage();
  }

  doc.end();
};

exec();

关键逻辑说明 #

1. 计算文本宽度：使用PDFKit提供的widthOfString()方法，分别计算不同样式文本的宽度（必须先匹配对应字体、字号样式，否则计算结果会不准确）。
2. 动态计算起始位置：通过(页面宽度 - 总文本宽度) / 2得出居中的起始X坐标，无论页码位数如何变化，组合文本都会始终处于页面水平居中位置。
3. 续接文本的样式衔接：保持原有续接逻辑的同时，将起始位置从固定值替换为动态计算的坐标，确保样式和居中效果同时生效。

注：PDFKit的align属性仅适用于指定了宽度的块级文本区域，对于分段样式的续接文本，无法直接通过align实现居中，必须通过宽度计算来动态定位。

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