使用CSS和React添加打印页面页码

一、设置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;