一、设置CSS样式
为了在打印页面中添加页码，我们需要设置CSS样式，这些样式将在打印时使用。我们可以通过CSS的@media print规则来实现这一点。这里我们需要创建一个新的CSS文件，名称为print.css:
/* print.css */
@media print {
.page-number:after {
content: counter(page);
}
.page-number {
counter-increment: page;
position: absolute;
bottom: 0;
right: 0;
}
}以上代码中：
.page-number:after选择器会在每一页打印完成后自动增加一个新的内容，这里使用了counter()函数来实现页码的自增。.page-number选择器会对所有拥有page-number类名的元素进行操作，这里使用了counter-increment属性来实现页码的累加。- 为了让页码在打印页面底部右侧显示，我们对
.page-number选择器进行了position、bottom和right的设置。
接下来，我们需要在React组件中引入这个CSS文件：
import React from 'react';
import './print.css';
function PrintPage() {
return (
<div>
<h2>这是要打印的页面</h2>
<div className="page-number"></div>
</div>
);
}
export default PrintPage;以上代码中，我们在组件中引入了print.css文件，并在组件中添加了一个HTML元素，这个元素不需要添加任何内容或样式，它只需要拥有page-number类名即可。
二、增加页码样式
为了让页码更好的显示，我们可以增加一些样式效果。这里我们可以在print.css文件中增加一些样式：
/* print.css */
@media print {
.page-number:after {
content: counter(page);
}
.page-number {
counter-increment: page;
position: absolute;
bottom: 0;
right: 0;
font-size: 12px;
color: #777;
padding: 5px;
background-color: #f7f7f7;
border: 1px solid #ddd;
border-radius: 2px;
}
}以上代码中，我们增加了以下样式：
font-size: 12px;：设置页码文字大小为12像素。color: #777;：设置页码文字颜色为灰色。padding: 5px;：设置页码文字与边框之间的内边距为5像素。background-color: #f7f7f7;：设置页码背景颜色为浅灰色。border: 1px solid #ddd;：设置页码边框为1像素灰色实线。border-radius: 2px;：设置页码边框圆角为2像素。
三、测试效果
现在，我们已经完成了相关的设置和样式，可以测试我们的打印功能是否正常工作。
在运行React应用程序之前，需要在浏览器的打印预览模式下进行测试。这可以确保不会在打印输出中遇到任何问题。
在您的React应用程序启动后，进入打印预览模式，并选择打印到PDF文件。您将能够预览PDF文件，确保页码显示在每页的底部右侧。
四、总结
通过CSS和React为打印页面添加页码，是非常简单的。我们使用@media print规则来为打印页面设置样式，并使用一个空的HTML元素来显示页码，最后通过增加一些样式效果来让页码更清晰可读。
完整代码：
/* print.css */
@media print {
.page-number:after {
content: counter(page);
}
.page-number {
counter-increment: page;
position: absolute;
bottom: 0;
right: 0;
font-size: 12px;
color: #777;
padding: 5px;
background-color: #f7f7f7;
border: 1px solid #ddd;
border-radius: 2px;
}
}
// PrintPage.js
import React from 'react';
import './print.css';
function PrintPage() {
return (
<div>
<h2>这是要打印的页面</h2>
<div className="page-number"></div>
</div>
);
}
export default PrintPage;原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/239242.html
微信扫一扫 
支付宝扫一扫 