HTML/CSS/JS生成A4发票：打印预览页码错位、多出空白页问题

一、解决额外空白页问题 #

空白页通常是元素总高度（含边距、内边距）超出A4标准高度（297mm）导致的，按以下步骤排查修复：

• 严格控制容器高度：给发票主容器设置固定A4尺寸，开启box-sizing: border-box确保内边距和边框计入总高度：

  .invoice-container {
    width: 210mm;
    height: 297mm;
    box-sizing: border-box;
    padding: 15mm; /* 预留页边距 */
    margin: 0 auto;
    border: none; /* 避免边框增加高度 */
  }
  

• 清除默认边距：重置body的默认margin和padding，防止浏览器默认样式导致整体高度溢出：

  body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
  }
  

• 打印时隐藏冗余元素：给不需要打印的元素添加no-print类，打印时隐藏：

  @media print {
    .no-print {
      display: none !important;
    }
  }
  

二、修复页码对齐错误 #

优先用CSS打印媒体查询控制页码，比JS更可靠，避免动态元素引发的高度问题：

方案1：CSS计数器实现页码（推荐） #

直接通过CSS定义打印页的页码，无需JS：

@media print {
  @page {
    size: A4 portrait;
    margin: 15mm; /* 与发票容器padding对应，预留页码位置 */
    /* 底部居中显示页码 */
    @bottom-center {
      content: "第 " counter(page) " 页，共 " counter(pages) " 页";
      font-size: 12px;
    }
  }
  body {
    counter-reset: page; /* 初始化页码计数器 */
  }
}

方案2：调整JS页码逻辑（如果必须用JS） #

如果坚持用JS生成页码，确保元素不占用文档流高度，避免触发分页：

// 打印前生成页码，固定定位在页脚
window.addEventListener('beforeprint', () => {
  // 先移除已存在的页码，避免重复生成
  const existingPageNum = document.querySelector('.page-number');
  if (existingPageNum) existingPageNum.remove();

  const pageNumEl = document.createElement('div');
  pageNumEl.className = 'page-number';
  pageNumEl.textContent = '第 1 页，共 1 页'; // 单页发票直接写死
  document.body.appendChild(pageNumEl);
});

// 打印后移除页码，不影响页面显示
window.addEventListener('afterprint', () => {
  const pageNumEl = document.querySelector('.page-number');
  if (pageNumEl) pageNumEl.remove();
});

配合CSS定位：

@media print {
  .page-number {
    position: fixed;
    bottom: 10mm; /* 对应@page的margin-bottom，避免被内容遮挡 */
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    font-size: 12px;
  }
}

三、测试验证 #

• 打开浏览器打印预览（Ctrl+P），设置缩放为实际大小/100%，不要选“适应页面”；
• 用浏览器开发者工具的「打印媒体模式」检查元素高度，确认发票容器总高度未超过297mm；
• 预览时查看是否仅显示单页，页码位置居中对齐。

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