本文详解如何通过 CSS 分页控制与 Flexbox 布局，将页脚图片仅显示一次且严格锚定在打印输出的最后一页底部，避免出现在中间页或内容末尾浮动，解决 position: fixed 导致的每页重复、margin-top: auto 在打印中失效等常见痛点。

本文详解如何通过 css 分页控制与 flexbox 布局，将页脚图片**仅显示一次且严格锚定在打印输出的最后一页底部**，避免出现在中间页或内容末尾浮动，解决 `position: fixed` 导致的每页重复、`margin-top: auto` 在打印中失效等常见痛点。

在生成医疗出院报告等专业 HTML 文档时，“末页页脚”并非视觉装饰，而是法律与合规性要素（如机构标识、保密声明、电子签名栏）。但浏览器打印引擎（尤其是 Chromium 内核）对 @page 和 position: fixed 的支持存在关键限制：fixed 元素在打印时默认作用于每一页，而 flex: 1 或 min-height: 100vh 在分页上下文中无法跨页生效——导致页脚脱离预期位置，悬停于内容末尾而非物理末页底部。

✅ 正确解法：创建独立末页容器 + 强制分页 + Flex 垂直对齐

核心思路是将页脚从主内容流中分离，显式构造一个专属的“末页”，并利用打印分页规则确保其始终作为最后一张 A4 页面渲染。以下是经过生产环境验证的完整实现：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

1. HTML 结构改造（插入独立末页容器）

在原有 （即 .content-container 闭合后）立即追加如下结构：

<!-- 仅当存在 footerImage 时插入 -->
${values.footerImage ? `
<div class="footer-spacer-page">
  <div class="footer-container">
    <img src="${values.footerImage}" class="footer-img" alt="Institution Footer">
  </div>
</div>` : ''}

⚠️ 注意：该 <div> <strong>必须置于主内容之后、<code>