如何在PDF-LIB中使用SingleLineTextLayout实现文本右对齐？

以下是使用layoutSingleLineText实现文本右对齐的完整代码示例，涵盖从创建PDF到绘制对齐文本的全流程：

import { PDFDocument, StandardFonts, layoutSingleLineText } from 'pdf-lib';

async function generateRightAlignedPDF() {
  // 初始化PDF文档
  const pdfDoc = await PDFDocument.create();
  
  // 添加页面，设置尺寸为600x800
  const page = pdfDoc.addPage([600, 800]);
  const { width, height } = page.getSize();
  
  // 嵌入基础字体（这里用Helvetica）
  const font = await pdfDoc.embedFont(StandardFonts.Helvetica);
  const fontSize = 16;
  const targetText = '这是一段右对齐的示例文本';
  
  // 配置文本布局选项，指定右对齐
  const layoutConfig = {
    font,
    fontSize,
    text: targetText,
    align: 'right',
    maxWidth: width - 50, // 预留左右各25px边距
  };
  
  // 计算文本的布局参数
  const textLayout = layoutSingleLineText(layoutConfig);
  
  // 绘制右对齐文本：从右侧边距25px处向左排列
  page.drawText(targetText, {
    x: (width - 25) - textLayout.width,
    y: height - 50, // 顶部预留50px边距
    font,
    fontSize,
  });
  
  // 导出并下载PDF
  const pdfBytes = await pdfDoc.save();
  const blob = new Blob([pdfBytes], { type: 'application/pdf' });
  const downloadLink = document.createElement('a');
  downloadLink.href = URL.createObjectURL(blob);
  downloadLink.download = 'right-aligned-example.pdf';
  downloadLink.click();
}

// 执行生成函数
generateRightAlignedPDF();

关键说明 #

• layoutSingleLineText 的核心作用是计算文本的实际宽度、对齐偏移等布局数据，需要传入包含字体、字号、文本内容、对齐方式和参考宽度的配置对象
• 设置 align: 'right' 时，必须指定 maxWidth 来定义文本的对齐范围（示例中为页面宽度减去左右边距）
• 绘制文本时，通过 (页面可用宽度) - 文本实际宽度 计算出右对齐文本的起始X坐标，确保文本紧贴右侧边距
• 若要实现居中或左对齐，仅需将 align 参数改为 'center' 或 'left'，并调整X坐标的计算逻辑即可：
  • 居中对齐：x: (width / 2) - (textLayout.width / 2)
  • 左对齐：x: 25（直接使用左侧边距）

内容的提问来源于stack exchange，提问作者Dan Willett