React-to-print页码无法显示求助：如何在打印PDF页显示页码？

针对你遇到的页码不显示问题，试试下面几个可行的方案：

方案1：替换@top-right-corner为@top-right #

部分浏览器和打印渲染引擎对@top-right-corner这类角落伪元素支持不佳，换成标准的@top-right兼容性更好：

const handlePrint = useReactToPrint({
    content: () => currentRef,
    pageStyle: `
    @page {
        size: auto;
        margin: 11mm 17mm 17mm 17mm;

        @top-right {
            content: "Page " counter(page);
        }
    }`,
    documentTitle: "Statement"  
});

方案2：确保打印区域边距足够 #

如果内容顶部和页面边距太近，页码可能被内容遮挡。可以调整@page的margin值，或者给打印容器的顶部加padding：

/* 在打印内容的容器样式里添加 */
.print-container {
    padding-top: 20mm; /* 留出页码显示的空间 */
}

方案3：手动添加页码元素（最可靠） #

如果伪元素方法始终不生效，直接在打印内容里插入页码元素，用CSS计数器控制：

1. 给打印容器添加计数器重置：

.print-container {
    counter-reset: page;
}

2. 在每页合适位置添加页码元素：

// 可放在打印内容的顶部固定位置，或每个分页组件内
<div className="page-number">
    Page <span className="page-count"></span>
</div>

3. 用CSS控制计数器递增和显示：

@media print {
    .page-number {
        position: fixed;
        top: 10mm;
        right: 17mm;
    }
    .page-count::after {
        counter-increment: page;
        content: counter(page);
    }
    /* 给每个分页内容添加分页符，确保计数器正常递增 */
    .print-page {
        page-break-after: always;
    }
    .print-page:last-child {
        page-break-after: avoid;
    }
}

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