我们知道，window.print()可以调起打印功能，但是直接用window.print()如果直接打印的话，没有样式，而且默认打印的是整个网页的内容。解决的方法可以用iframe方式引入需要打印的区域，并把样式添加进去，然后把iframe标签定位到看不到的地方去。搜了一下，已经有人造好了轮子，react-to-print插件就是这么做的。

一.使用方法

1. 下载 npm install --save react-to-print
2. 引用 import ReactToPrint from 'react-to-print';
3. 调用

 // 需要打印的页面
 import React, { useRef } from 'react';
 import ReactToPrint from 'react-to-print';

 const PrintContent = () => {
   const componentRef = useRef();
   return (
      <div>
        <ReactToPrint
          trigger={() => <a>打印</a>}
          content={() => componentRef.current}
          // 设置打印样式 
          // size: landscape 横向打印（不设置的话默认纵向打印）
          // pageStyle={`@page {padding-top:10px;size: landscape;}`}
          // 这里是第一处设置：打印未显示元素的关键，默认情况copyStyles是为true的，
          // 打印未显示的元素时，我们需要把它设置为false，这样打印出来的页面才不会是空白页。
          copyStyles={false}
        />
        {/* 这里需要给打印的内容添加一个css类，类的样式如style.less文件： */}
        <div ref={componentRef} className="printContent">
          需要打印的内容
        </div>
      </div>
    );
  };
  export default PrintContent;

二.组件参数

<ReactToPrint />

该组件接受以下参数（注意：?表示可选参数）：

image.png