如何用Paged.js为动态页数文档生成无空白页的最后一页独立页脚

方法1：用:last伪类直接定义最后一页样式 #

不需要给页面命名，直接通过@page:last单独设置最后一页的页脚，不会触发额外空白页：

/* 全局页脚样式 */
@page {
  @bottom-center {
    content: "普通页脚 - 第 " counter(page) " 页 / 共 " counter(pages) " 页";
  }
}

/* 最后一页专属页脚 */
@page:last {
  @bottom-center {
    content: "这是最后一页的专属页脚";
  }
}

方法2：修复命名页面导致的空白页问题 #

如果坚持用命名页面方案，空白页通常是错误的分页触发逻辑导致的，可按以下方式调整：

• 不要给内容末尾加page-break-after: always这类强制分页规则，这会直接生成空白页。
• 用:last-child精准绑定最后一个内容块的页面样式：

@page {
  @bottom-center {
    content: "普通页脚 - 第 " counter(page) " 页";
  }
}

@page last-page {
  @bottom-center {
    content: "最后一页专属页脚";
  }
}

/* 仅给最后一个内容块所在页面应用last-page样式 */
.content-container:last-child {
  page: last-page;
}

注意：确保.content-container是你的内容容器类名，且内容末尾没有空元素（比如空<div>、<p>），这类元素会被Paged.js判定为需分页内容，进而生成空白页。

额外排查技巧 #

开启Paged.js调试模式，查看页面分割逻辑，定位空白页触发原因：

new Paged.Previewer({
  debug: true
}).preview();

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