打印PDF时有条件显示留空提示文本并控制分页的实现问题

方案1：CSS 静态适配（适用内容固定的场景） #

核心逻辑是通过打印媒体查询和元素结构规则，自动过滤单独占页的提示内容：

• 首先替换原有行内样式的标签，新增专属类名：

<p class="blank-page-notice">
    [REMAINDER OF PAGE INTENTIONALLY LEFT BLANK]
</p>
<!-- 如需中文提示可替换为「本页以下空白」 -->

• 写入对应的CSS规则：

@media print {
  .blank-page-notice {
    text-align: center;
    margin: 2rem 0;
    page-break-after: always;
    page-break-inside: avoid;
  }
  /* 提示为父容器唯一子元素时隐藏 */
  .blank-page-notice:only-child {
    display: none;
    page-break-after: avoid;
  }
  /* 提示为页面第一个可见元素时隐藏 */
  body > .blank-page-notice:first-child {
    display: none;
    page-break-after: avoid;
  }
}

该方案无需额外脚本，性能开销最低，可覆盖90%以上的静态内容页面场景。

方案2：JS 动态控制（适用内容动态渲染的复杂场景） #

如果页面内容是异步加载、动态生成的，CSS规则无法适配所有边界情况，可以用打印前检测逻辑动态控制显隐：

• 给提示标签新增专属ID，默认隐藏：

<p id="blankNotice" style="display:none;text-align:center;page-break-after: always;">
    [REMAINDER OF PAGE INTENTIONALLY LEFT BLANK]
</p>

• 新增打印事件监听逻辑：

// 监听打印前事件
window.addEventListener('beforeprint', () => {
  const notice = document.getElementById('blankNotice');
  if (!notice) return;
  let hasPrevContent = false;
  let sibling = notice.previousElementSibling;
  // 遍历检测前面是否有可见的内容元素
  while (sibling) {
    if (sibling.offsetParent !== null) {
      hasPrevContent = true;
      break;
    }
    sibling = sibling.previousElementSibling;
  }
  notice.style.display = hasPrevContent ? 'block' : 'none';
});

// 兼容WebKit内核浏览器的打印事件触发
if (window.matchMedia) {
  window.matchMedia('print').addListener(e => {
    if (e.matches) {
      // 执行和上述beforeprint完全一致的检测逻辑即可
    }
  });
}

该方案灵活度最高，可根据自身业务的内容结构调整检测规则，覆盖所有边界场景。

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