Vue.js发票打印页码异常：所有页面显示Page 1 of 20的解决咨询

一、从CSS打印样式排查（最常见原因） #

打印页码多数依赖CSS计数器实现，如果计数器未正确初始化或递增，会导致所有页面显示页码1：

• 检查是否正确配置了@page伪类和计数器：
  必须在全局元素（如body）初始化页码计数器，在分页元素上递增计数器，同时在@page中引用计数器：

  @media print {
    body {
      counter-reset: page; /* 初始化页码计数器为0 */
    }
  
    @page {
      @top-right {
        /* 使用counter(page)获取当前页码，counter(pages)获取总页数 */
        content: "Page " counter(page) " of " counter(pages);
      }
    }
  
    .invoice-page {
      page-break-after: always; /* 强制分页 */
      counter-increment: page; /* 每出现一个分页元素，页码+1 */
    }
  
    .invoice-page:last-child {
      page-break-after: avoid; /* 最后一页取消分页符 */
    }
  }
  

• 排查是否有元素样式干扰计数器：比如设置了position: fixed的页码元素，如果内容是静态写死的1，会导致每页都显示1；需确保fixed元素的内容是动态计数器值，而非硬编码。

二、Vue渲染逻辑排查 #

如果是通过Vue动态渲染页码，可能是数据绑定或渲染时机问题：

• 检查模板是否硬编码了页码：比如直接写Page 1 of {{ totalPages }}，而不是用循环索引动态计算当前页码。正确写法应该是在分页循环中使用索引：

  <div v-for="(page, idx) in invoicePages" :key="idx" class="invoice-page">
    <div class="page-number">Page {{ idx + 1 }} of {{ invoicePages.length }}</div>
    <!-- 发票内容 -->
  </div>
  

• 确认打印时机是否正确：如果是异步加载数据后生成发票，需等待Vue完成DOM渲染再触发打印，否则可能页码未更新。用$nextTick包裹打印逻辑：

  printInvoice() {
    this.$nextTick(() => {
      window.print()
    })
  }
  

三、分页逻辑验证 #

• 检查总页数计算是否正确：确认totalPages或分页数组的长度与实际打印页数一致，避免数据统计错误导致总页数显示正确但当前页码错误。
• 检查内容拆分逻辑：如果是根据内容高度自动分页，需确保分页逻辑正确拆分了内容，每个分页区域对应唯一的页码索引，没有重复或遗漏的分页标记。

四、快速测试方法 #

• 先简化场景：用静态HTML+CSS写一个多页面结构，测试打印页码是否正常，排除Vue框架的影响。如果静态页面正常，再逐步加回Vue逻辑排查。
• 浏览器打印预览调试：打开打印预览后，用开发者工具（Chrome可按F12进入打印预览模式的调试）查看每个分页元素的CSS属性，检查计数器page的值是否递增。

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