1 下载
npm install --save react-to-print
2 引用
import ReactToPrint from 'react-to-print';
3 调用
//触发按钮
<ReactToPrint
trigger={() => <a href="#">点此打印</a>}
content={() => this.ref}
/>
//打印内容
<div ref={el => (this.ref = el)}>
....内容
<div/>
注意:trilgger返回的组件上添加onClick属性是不会触发事件的。所以需要打印的内容先添加到ref中,再点击“打印”才能在浏览器的打印预览中看到内容。
想要点击之后再将指定内容塞到div中,是得不到预期结果的。
此时,可以使用一个弹窗,将需要打印的内容先显示在弹窗内,弹窗的确定键改为打印键即可。
我用的是antd的Modal
<Modal title="打印" visible={isModalVisible}
footer={<ReactToPrint
trigger={() => <Button>打印</Button>}
content={() => this.refs}
onAfterPrint={handleCancel} // 打印后触发的回调功能,关闭弹窗
/>}
onCancel={handleCancel}>
//获取到的打印内容
</Modal>
至于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? | 传递给打印窗口主体的类 |
参考:https://segmentfault.com/a/1190000020680416