我們知道论衍，window.print()可以調(diào)起打印功能堰燎，但是直接用window.print()如果直接打印的話基矮，沒有樣式淆储，而且默認(rèn)打印的是整個(gè)網(wǎng)頁(yè)的內(nèi)容。解決的方法可以用iframe方式引入需要打印的區(qū)域家浇，并把樣式添加進(jìn)去本砰，然后把iframe標(biāo)簽定位到看不到的地方去。搜了一下钢悲，已經(jīng)有人造好了輪子点额，react-to-print插件就是這么做的。
一.使用方法
- 下載
npm install --save react-to-print - 引用
import ReactToPrint from 'react-to-print'; - 調(diào)用
// 需要打印的頁(yè)面
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}
// 設(shè)置打印樣式
// size: landscape 橫向打虞毫铡（不設(shè)置的話默認(rèn)縱向打踊估狻）
// pageStyle={`@page {padding-top:10px;size: landscape;}`}
// 這里是第一處設(shè)置：打印未顯示元素的關(guān)鍵，默認(rèn)情況copyStyles是為true的芦昔，
// 打印未顯示的元素時(shí)诱贿，我們需要把它設(shè)置為false娃肿，這樣打印出來(lái)的頁(yè)面才不會(huì)是空白頁(yè)咕缎。
copyStyles={false}
/>
{/* 這里需要給打印的內(nèi)容添加一個(gè)css類珠十，類的樣式如style.less文件： */}
<div ref={componentRef} className="printContent">
需要打印的內(nèi)容
</div>
</div>
);
};
export default PrintContent;
二.組件參數(shù)
<ReactToPrint />
該組件接受以下參數(shù)（注意：?表示可選參數(shù)）：
image.png
