react中使用打印功能

最近在开发react项目中使用到了打印功能

1、使用react-to-print插件（npm自行安装）

import React from 'react';
import ReactToPrint from 'react-to-print';
import ComponentToPrint from "srcDir/pages/internalNanjing/summaryStatistics/ComponentToPrint.js";

class Example extends React.Component {
  render() {
    return (
      <div>
        <ReactToPrint
          trigger={() => <a href="#">Print this out!</a>}
          content={() => this.componentRef}
        />
        <ComponentToPrint ref={el => (this.componentRef = el)} />
      </div>
    );
  }
}
 
// 子组件
class ComponentToPrint extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      branchNameArr: [], // 网点列表
    };
    this.printRef = React.createRef();
  }
  componentDidMount () {
    Request.GET(`${host}/branch-banks/get-net-list`).then((res) => {
      this.setState({
        branchNameArr: res
      });
    });
  }
  render() {
    return (
      <div className="print">
          <main ref={this.printRef}>
               <table>
                <thead>
                <th>column 1</th>
                <th>column 2</th>
                <th>column 3</th>
               </thead>
               <tbody>
                <tr>
                 <td>data 1</td>
                 <td>data 2</td>
                 <td>data 3</td>
                </tr>
                <tr>
                 <td>data 1</td>
                 <td>data 2</td>
                 <td>data 3</td>
                </tr>
                <tr>
                 <td>data 1</td>
                 <td>data 2</td>
                 <td>data 3</td>
                </tr>
               </tbody>
             </table>
          </main>
     </div>
    );
  }
}
 

不过该插件在windows系统打印，有的机器不显示页码

2.使用原始js打印

import React from 'react';
import ComponentToPrint from "srcDir/pages/internalNanjing/summaryStatistics/ComponentToPrint.js";

class Example extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      printType: 1,
    };
  }
  // 原生打印
  printPartFn = () => {
    const old = window.document.body.innerHTML;
    const printPart = document.querySelector(".print");
    window.document.body.innerHTML = "";
    window.document.body.appendChild(printPart);
    window.print();
    window.document.body.innerHTML = old;
    window.location.reload();
  };
  render() {
    return (
      <div>
        <Button
          onClick={() => {
            this.printPartFn();
          }}
        >打印
        </Button>
        <ComponentToPrint ref={el => (this.componentRef = el)} />
      </div>
    );
  }
}
 
// 子组件
class ComponentToPrint extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      branchNameArr: [], // 网点列表
    };
    this.printRef = React.createRef();
  }
  componentDidMount () {
    Request.GET(`${host}/branch-banks/get-net-list`).then((res) => {
      this.setState({
        branchNameArr: res
      });
    });
  }
  render() {
    return (
      <div className="print">
          <main ref={this.printRef}>
               <table>
                <thead>
                <th>column 1</th>
                <th>column 2</th>
                <th>column 3</th>
               </thead>
               <tbody>
                <tr>
                 <td>data 1</td>
                 <td>data 2</td>
                 <td>data 3</td>
                </tr>
                <tr>
                 <td>data 1</td>
                 <td>data 2</td>
                 <td>data 3</td>
                </tr>
                <tr>
                 <td>data 1</td>
                 <td>data 2</td>
                 <td>data 3</td>
                </tr>
               </tbody>
             </table>
          </main>
     </div>
    );
  }
}