react-native-html-to-pdf生成PDF添加页码失败，如何解决？

问题核心是普通CSS计数器未适配react-native-html-to-pdf底层WebView的分页渲染机制，导致计数器未在分页时正确递增。以下是可行的解决方案：

关键CSS规则调整 #

结合@page规则初始化并递增计数器，同时用固定定位元素显示页码，确保每一页都能正确触发计数器更新：

/* 初始化页码计数器，从0开始 */
body {
  counter-reset: page 0;
  margin: 0;
  padding: 20px;
}

/* 每渲染一页就递增计数器 */
@page {
  counter-increment: page;
  /* 设置页边距，给页脚页码预留空间 */
  margin: 30px;
}

/* 固定定位的页脚，确保在每一页底部显示 */
.page-footer {
  position: fixed;
  bottom: 10px;
  right: 20px;
  font-size: 12px;
  color: #666;
}

/* 生成页码文本，counter(pages)显示总页数（需WebView引擎支持） */
.page-footer::after {
  content: "Page " counter(page) " of " counter(pages);
}

/* 优化大表格的分页行为，避免行被截断 */
table {
  width: 100%;
  border-collapse: collapse;
  page-break-inside: auto;
}

tr {
  page-break-inside: avoid; /* 避免单行跨页 */
  page-break-after: auto;
}

th, td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}

对应的HTML结构 #

在HTML末尾添加页码容器，同时插入你的动态表格数据：

<body>
  <!-- 动态生成的5列表格 -->
  <table>
    <thead>
      <tr>
        <th>列1</th>
        <th>列2</th>
        <th>列3</th>
        <th>列4</th>
        <th>列5</th>
      </tr>
    </thead>
    <tbody>
      <!-- 这里替换为你的100+行动态数据 -->
      {dynamicTableRows}
    </tbody>
  </table>
  
  <!-- 页码显示容器 -->
  <div class="page-footer"></div>
</body>

额外注意事项 #

• 确保react-native-html-to-pdf使用WKWebView（iOS）或最新的Android WebView，旧版UIWebView对CSS分页和计数器支持有限
• 不要给body或外层容器设置overflow: hidden，否则会阻止自动分页
• 如果counter(pages)总页数不显示，可暂时只显示当前页码counter(page)，部分WebView引擎不支持总页数计数器

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