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