如何使用PrinceXML将div对齐到PDF对应页面的底部

方案1：全局多页面通用底部（静态流方案） #

如果你需要所有生成的PDF页面底部都显示该div，用静态流配置是最稳定的方案，正确写法如下：

1. 给目标div配置流规则

.footer-div {
  flow: static(prince-footer);
  /* 你自己的div自定义样式，比如宽高、内边距、字体等 */
  width: 100%;
  padding: 8px 0;
  border-top: 1px solid #eee;
}

2. 在@page规则中绑定流到页面底部区域

@page {
  /* 底部边距需要预留足够高度放置你的div，避免和正文内容重叠 */
  margin-bottom: 60px;
  @bottom {
    content: flow(prince-footer);
  }
}

如果只需要特定页面显示该底部div，给对应页面的父容器设置自定义页面规则即可：

.special-page-container {
  page: special-page;
}
@page special-page {
  margin-bottom: 60px;
  @bottom {
    content: flow(prince-footer);
  }
}

方案2：特定页面单div底部对齐（绝对定位方案） #

如果只需要某一个页面内的单独div对齐到当前页底部，不需要全局复用，用绝对定位更灵活：

/* 目标div所在页面的父容器样式 */
.target-page-wrapper {
  page: target-page;
  position: relative;
}
/* 底部div样式 */
.bottom-div {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  /* 自定义样式 */
}

关于Chrome不识别Prince私有属性的说明 #

-prince-float、flow这类属性是PrinceXML的专属扩展CSS属性，Chrome本身不支持是正常现象，不会影响PDF生成的最终效果，仅会导致Chrome预览时看不到对应效果。如果需要避免开发预览时的样式干扰，可以用媒体查询隔离Prince专属规则：

@media print {
  /* 仅在打印/Prince生成场景生效的规则 */
  .bottom-div {
    -prince-float: bottom;
  }
}

你之前尝试的-prince-float: page属性值有误，改为-prince-float: bottom即可实现对齐页面底部的效果。

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