如何用Flying Saucer在PDF末页底部放置图片（页码上方）

针对你遇到的问题，这里提供两种经过验证的实现方式，同时解决元素拉伸的问题：

方案1：利用@page :last实现最后一页专属图片（推荐） #

这种方法不需要额外分页，直接通过CSS伪类定位到最后一页，确保图片只在最后一页显示：

1. 先设置根容器的基础样式，确保页面高度被正确识别：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.page-container {
  position: relative;
  min-height: 100%;
}

2. 定义图片容器的样式，默认隐藏，仅在最后一页显示：

.last-page-footer-img {
  position: absolute;
  bottom: 30px; /* 调整此值匹配你的页码边距高度，确保在页码上方 */
  right: 20px; /* 调整右侧边距 */
  display: none;
}

/* 针对最后一页显示图片 */
@page :last {
  /* 如果有默认页脚/页眉，可在此清空 */
  @top-left { content: ""; }
  @bottom-right { content: ""; }
}

@page :last .last-page-footer-img {
  display: block;
}

3. 在HTML结构的末尾添加图片容器：

<div class="page-container">
  <!-- 你的所有PDF内容 -->
  
  <div class="last-page-footer-img">
    <img src="your-image-url" alt="footer image" width="120" height="60">
  </div>
</div>

方案2：强制分页生成最后一页（兼容性更好） #

如果你的Flying Saucer版本不支持@page :last，可以用强制分页的方式生成单独的最后一页，再放置图片：

1. 设置最后一页的容器样式：

.final-page {
  page-break-before: always;
  height: 100%;
  position: relative;
}

.final-page .footer-img {
  position: absolute;
  bottom: 30px;
  right: 20px;
}

2. 在HTML末尾添加最后一页容器：

<!-- 你的所有PDF内容 -->

<div class="final-page">
  <!-- 如果最后一页需要保留内容，在此添加；仅放图片则直接写img标签 -->
  <img class="footer-img" src="your-image-url" alt="footer image">
</div>

关于元素拉伸的关键要点 #

• 要让容器拉伸至整页，必须确保html、body和外层容器都设置height: 100%，同时清除默认的margin和padding。
• 使用min-height: 100%替代height: 100%作为外层容器的高度属性，这样当内容超过一页时，容器会自动延伸，不会出现内容被截断的问题。

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