CSS與React-to-Print：實現頁面打印的完美方案

一、前言

在前端開發中，實現頁面打印功能是一個必不可少的功能，但由於打印內容和網頁內容存在很大的差異，所以實現頁面打印往往會遇到一些問題，例如打印效果不理想、分頁不合理等等。本文將介紹如何利用CSS和React-to-Print這個庫實現頁面打印的完美方案。

二、CSS實現打印樣式

在使用瀏覽器進行頁面打印時，我們經常遇到打印效果與網頁效果差別很大的情況，比如當我們打印一個包含表格的頁面時，表格的邊框和樣式在打印時可能會消失，這是因為我們需要給打印頁面單獨設置樣式。

下面是一個簡單的例子，這個例子通過 CSS 的 media="print" 屬性來設置打印時需要的樣式：

@media print {
  table, td, th {
    border: 1px solid black;
  }
}

以上代碼中，我們通過 CSS 的 media="print" 屬性來設置打印頁面時需要的樣式，通過選擇器 table, td, th 來選中所有表格、單元格和表頭，然後設置了它們的邊框樣式為1像素的黑線。

需要注意的是，CSS樣式對一些打印參數的選擇進行了限制，如不能改變頁面方向、頁面大小等參數，更多的要注意可以參考官方文檔。

三、React-to-Print簡介

React-to-Print是一個為React組件提供打印功能的第三方庫，它提供了 <PrintComponents /> 組件，可以通過這個組件很方便地實現頁面打印。

下面是一個簡單的例子，通過它可以看到React-to-Print如何實現打印組件：

import React from 'react';
import ReactToPrint from 'react-to-print';

class MyComponent extends React.Component {
  render() {
    return (
      <div>
        <h1>標題</h1>
        <button onClick={() => window.print()}>打印</button>
      </div>
    );
  }
}

class PrintComponent extends React.Component {
  render() {
    return (
      <div>
        <MyComponent />
      </div>
    );
  }
}

class App extends React.Component {
  render() {
    return (
      <div>
        <PrintComponent ref={el => (this.componentRef = el)} />
        <ReactToPrint
          trigger={() => <button>點擊打印</button>}
          content={() => this.componentRef}
        />
      </div>
    );
  }
}

export default App;

以上代碼中，我們先定義了一個 MyComponent 組件，然後在 PrintComponent 中引入它，通過設置 ref 屬性來獲取它的引用，將它包含在 ReactToPrint 組件的 content 屬性中，最後在需要打印的位置設置一個按鈕，通過 ReactToPrint 組件的 trigger 屬性來觸發打印操作。

四、結合CSS實現完美打印

結合前面的CSS樣式和React-to-Print，在React組件中實現打印功能，可以很容易地實現完美打印。

import React from 'react';
import ReactToPrint from 'react-to-print';
import './index.css'

class MyComponent extends React.Component {
  render() {
    return (
      <div className="container">
        <h1>打印頁面標題</h1>
        <table>
          <thead>
            <tr>
              <th>姓名</th>
              <th>年齡</th>
              <th>地址</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>張三</td>
              <td>18</td>
              <td>北京市</td>
            </tr>
            <tr>
              <td>李四</td>
              <td>20</td>
              <td>上海市</td>
            </tr>
          </tbody>
        </table>
      </div>
    );
  }
}

class PrintComponent extends React.Component {
  render() {
    return (
      <div>
        <MyComponent />
      </div>
    );
  }
}

class App extends React.Component {
  render() {
    return (
      <div>
        <PrintComponent ref={el => (this.componentRef = el)} />
        <ReactToPrint
          trigger={() => <button>點擊打印</button>}
          content={() => this.componentRef}
        />
      </div>
    );
  }
}

export default App;

以上代碼中，我們將整個打印頁面放在MyComponent組件中，通過CSS樣式對表格、字體等進行了設置，並將MyComponent放入PrintComponent中，最後通過ReactToPrint組件實現打印。需要注意，這裡表格樣式和字體等CSS屬性需要在media=”print”屬性中設置才能生效。

五、小結

通過本文的介紹，我們了解了如何通過CSS和React-to-Print實現頁面打印的完美方案，同時也了解到了在打印中需要特別注意的一些問題。實現完美打印，可以提高我們的用戶體驗，讓用戶在獲取信息時更加方便和愉悅。