使用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;