pdfMake实现页面水平等分 上下放置相同内容垂直居中

你当前采用默认流式从上到下排版、用零高度表格模拟分隔线的方案，本身就无法实现固定中点分隔的效果：pdfMake默认按内容顺序依次渲染，不会自动计算页面剩余空间分配留白，当表格行数变化、单份内容总高度改变时，分隔线位置会随内容流上下偏移，既没法固定在页面垂直中点，也无法让两份内容分别在上下区域自动垂直居中。

直接将页面可用区域拆分为两个固定高度的等高层级容器，分隔线直接作为上半区容器的底部边框实现，无需额外插入分隔元素，每个容器内部开启垂直居中布局，即可完全匹配你要的效果：

• A4竖版页面总高度为842pt，你当前设置的上下页边距各为30pt，因此页面总可用高度为842 - 30*2 = 782pt，上下半区各分配391pt固定高度
• 分隔线天然卡在两个容器的衔接处，位置永远固定在页面垂直中点，不受内容行数变化影响
• 每个半区容器内的内容自动垂直居中，不需要手动计算留白高度

代码修改步骤 #

1. 先删除你之前定义的horizontalRule变量，不需要用表格模拟分隔线
2. 在docDefinition定义前新增半区高度常量：

// 上下半区固定高度，可根据页面尺寸、页边距调整
const HALF_PAGE_HEIGHT = (842 - 30 * 2) / 2;

3. 将docDefinition里的content字段整体替换为如下结构：

content: [
  // 上半区：Office Copy
  {
    height: HALF_PAGE_HEIGHT,
    // 底部2pt黑边作为页面中间的水平分隔线
    border: [false, false, false, true],
    borderWidth: [0, 0, 0, 2],
    // 开启容器内垂直居中
    verticalAlign: 'middle',
    stack: [
      { text: 'Office Copy', bold: true, fontSize: fontSize + 1, margin: [0, 0, 0, 8] },
      ...page
    ]
  },
  // 下半区：Transporter Copy
  {
    height: HALF_PAGE_HEIGHT,
    verticalAlign: 'middle',
    stack: [
      { text: 'Transporter Copy', bold: true, fontSize: fontSize + 1, margin: [0, 0, 0, 8] },
      structuredClone(page) // 比JSON.parse(JSON.stringify)性能更好，和你原有注释的优化点一致
    ]
  }
]

注意事项 #

• 如果后续修改页面尺寸、页边距，重新按(页面总高度 - 上边距 - 下边距)/2的公式计算HALF_PAGE_HEIGHT即可，Letter尺寸总高为792pt，可按需替换
• 如果需要给分隔线上下增加留白，直接给上半区加paddingBottom、下半区加paddingTop即可，padding值包含在固定半区高度内，不会导致分隔线移位
• 只要单份内容总高度不超过391pt，不管表格行数是多少，布局都不会错乱，分隔线始终在页面中点，内容自动居中

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