使用Paged.js生成PDF时Flex项跨页溢出异常问题求助

你的问题出在Flex布局与Paged.js分页逻辑的兼容性上：Flex容器默认被视为一个不可拆分的整体块，当内容长度超过单页时，Paged.js无法正确将两栏内容分别拆分跨页，导致左栏溢出、右栏被挤到下一页。

下面提供两种可行的解决方法：

方法1：改用CSS多列布局（推荐） #

CSS多列布局是为流式多栏内容设计的，天然支持跨页拆分，完美适配Paged.js的分页需求。

修改后的代码：

CSS #

.wrapper {
  background-color: lightgray;
  columns: 2; /* 直接设置两列 */
  column-gap: 0; /* 去掉默认列间距，和原flex效果一致 */
}

.child1, .child2 {
  break-inside: avoid; /* 避免单段内容被拆分到两页 */
  width: 100%;
}

.child1 {
  background-color: yellow;
}

.child2 {
  background-color: green;
}

HTML #

<div class="wrapper">
  <p class="child1">
    Donec odio lacus, maximus a ultrices non, pulvinar eget nunc. Morbi
    cursus eget enim eleifend tincidunt. In vel odio gravida, hendrerit
    diam ut, fringilla urna. Aenean sit amet nisi ut nisl placerat
    bibendum. Aenean consequat dapibus orci non accumsan. In imperdiet leo
    lectus, vitae euismod quam egestas et. Donec augue mauris, malesuada
    ac nunc dapibus, faucibus malesuada velit. Vivamus quis enim eget orci
    sollicitudin ultrices. Duis ut nulla velit. Donec feugiat quam nec sem
    cursus, vel feugiat nunc fringilla.
  </p>

  <p class="child2">
    Donec auctor libero a lorem egestas consequat. Cras ac lacinia ipsum.
    Donec non elementum purus, et porta eros. Cras ullamcorper mi eu
    semper aliquam. Duis magna ipsum, auctor at leo non, pharetra luctus
    felis. Ut tempus finibus dui, sit amet scelerisque nisi feugiat non.
    Proin posuere quam vitae finibus pulvinar. Lorem ipsum dolor sit amet,
    consectetur adipiscing elit. Vestibulum id felis at nulla mollis
    bibendum.
  </p>
</div>

方法2：用Grid布局替代Flex #

如果偏好网格布局，Grid比Flex更适合Paged.js的分页处理，因为Grid的单元格可以独立跨页：

CSS #

.wrapper {
  background-color: lightgray;
  display: grid;
  grid-template-columns: 1fr 1fr; /* 两栏等分 */
}

.child1 {
  background-color: yellow;
}

.child2 {
  background-color: green;
}

/* 允许子元素跨页拆分 */
.child1, .child2 {
  break-inside: auto;
}

注意事项 #

• 确保Paged.js脚本正确加载，且在DOM渲染完成后初始化分页逻辑
• Chrome保存PDF时，关闭"背景图形"以外的额外设置，避免样式错乱

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