JS|react-to-print 打印 JS|React

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

//触发按钮点此打印} content={() => this.ref} /> //打印内容
(this.ref = el)}> ....内容

注意：trilgger返回的组件上添加onClick属性是不会触发事件的。所以需要打印的内容先添加到ref中，再点击“打印”才能在浏览器的打印预览中看到内容。
想要点击之后再将指定内容塞到div中，是得不到预期结果的。
此时，可以使用一个弹窗，将需要打印的内容先显示在弹窗内，弹窗的确定键改为打印键即可。
我用的是antd的Modal

} content={() => this.refs} onAfterPrint={handleCancel} // 打印后触发的回调功能，关闭弹窗 />} onCancel={handleCancel}> //获取到的打印内容

至于onBeforeGetContent属性，虽然是在库收集页面内容之前触发的回调函数（点击打印就能触发），但是吧，我把需要打印的内容放在state中，onBeforeGetContent的回调函数修改state，打印预览上并没有显示出修改内容，就，，放弃了
4 参数该组件接受以下参数（注意：?表示可选参数）：

名称	类型	描述
trigger	function	返回React组件或HTML元素的函数
content	function	返回组件参考值的函数。然后将该参考值的内容用于打印
copyStyles	boolean?	将所有< style>和< link type=“stylesheet” />标签从< head>父窗口内部复制到打印窗口。（默认值：true）
onBeforeGetContent	function?	在库收集页面内容之前触发的回调函数。返回void或Promise。可用于在打印之前更改页面上的内容。
onBeforePrint	function?	打印前触发的回调功能。返回void或Promise。注意：此功能在打印之前立即运行，但在收集页面内容之后才运行。要在打印之前修改内容，请onBeforeGetContent改用。
onAfterPrint	function?	打印后触发的回调功能
onPrintError	function(errorLocation: string, error: Error)?	如果打印错误严重到无法继续打印，将调用的回调函数。目前仅限于onBeforeGetContent或中的Promise拒绝onBeforePrint。使用它尝试再次打印。errorLocation会告诉您Promise在哪个回调中被拒绝。
removeAfterPrint	boolean?	执行操作后，卸下打印iframe。默认为false。
pageStyle	string?	覆盖默认的打印窗口样式
bodyClass	string?	传递给打印窗口主体的类