如何实现打印时每页顶部显示分隔图？纯JS无jQuery方案咨询

可以通过监听打印前后事件，结合元素高度计算和动态DOM操作来实现需求，具体步骤如下：

核心思路 #

1. 在打印前（beforeprint事件触发时），计算打印页面的可用高度与content#1的实际高度，判断是否会因内容过长分页。
2. 若判定会分页，则动态克隆分隔图元素，设置打印专属样式强制其在新一页顶部显示，并插入到content#1之后。
3. 打印完成后（afterprint事件触发时），移除动态添加的分隔图，恢复页面原有状态。

代码实现 #

假设你的页面结构如下：

<div id="content-1">
  <!-- 你的长内容 -->
</div>
<!-- 原分隔图默认隐藏 -->
<img id="seperator-image" src="your-separator-path.jpg" style="display: none;" alt="分隔图">

对应的JavaScript代码：

const content1 = document.getElementById('content-1');
const originalSeparator = document.getElementById('seperator-image');
let dynamicSeparator = null;

// 计算打印页面的可用高度（以A4纸为例，可根据实际纸张调整）
function calculatePrintPageHeight() {
  // 创建隐藏测试元素模拟打印页面尺寸
  const testPage = document.createElement('div');
  Object.assign(testPage.style, {
    position: 'absolute',
    top: '-9999px',
    width: '210mm',
    height: '297mm',
    margin: '0',
    padding: '0',
    border: 'none'
  });
  document.body.appendChild(testPage);
  
  // 获取转换后的像素高度，扣除页面默认margin
  const pageTotalHeight = testPage.offsetHeight;
  const bodyMargin = parseInt(getComputedStyle(document.body).marginTop) || 0;
  const usableHeight = pageTotalHeight - bodyMargin * 2;
  
  document.body.removeChild(testPage);
  return usableHeight;
}

// 打印前处理逻辑
window.addEventListener('beforeprint', () => {
  const pageUsableHeight = calculatePrintPageHeight();
  const contentTotalHeight = content1.offsetHeight;
  
  // 判断内容是否超出单页高度
  if (contentTotalHeight > pageUsableHeight) {
    // 克隆原分隔图，避免修改原元素状态
    dynamicSeparator = originalSeparator.cloneNode(true);
    // 设置打印专属样式：强制新一页显示，顶部分布
    Object.assign(dynamicSeparator.style, {
      display: 'block',
      pageBreakBefore: 'always',
      marginTop: '0',
      paddingTop: '0',
      marginBottom: '1rem' // 可根据需求调整与下方内容的间距
    });
    
    // 插入到content#1的下一个位置
    content1.parentNode.insertBefore(dynamicSeparator, content1.nextSibling);
  }
});

// 打印后清理动态元素
window.addEventListener('afterprint', () => {
  if (dynamicSeparator && dynamicSeparator.parentNode) {
    dynamicSeparator.parentNode.removeChild(dynamicSeparator);
    dynamicSeparator = null;
  }
});

注意事项 #

• 纸张尺寸可根据实际需求修改：比如Letter纸可设置width: '215.9mm'、height: '279.4mm'。
• 若你的页面有自定义打印margin或padding，需要在calculatePrintPageHeight函数中对应扣除这些值，确保高度计算准确。
• pageBreakBefore: 'always'是关键样式，能强制分隔图在新一页渲染，保证其处于第二页顶部。
• 克隆原分隔图而非直接修改原元素，是为了避免影响页面在正常浏览模式下的显示效果。

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