在react中实现打印功能

最近需要在react项目中实现打印功能,刚开始想到的都是基于window.print(),但是window.print()如果直接打印的话,没有样式.直接将打印内容设置为打印的区域的话,当你取消打印的时候你会发现整个网页都被你要打印的区域占满了,你还得用window.reload()重新加载一下页面,用户交互很不好。

于是用了iframe方式解决,使用户交互更加友好,这个时候就暴露出一个问题,需要打印的内容的样式无法引入到iframe里面去,样式无法引入,样式无法引入,样式无法引入(将样式写成内联样式,这个问题可以得到解决,我的项目不适用)!!!这个样式折磨了我好久,经过查找资料,得到了解决,下面分享下。

使用react-to-print插件:
在项目中引入依赖:
在react中实现打印功能
在项目中引入:
在react中实现打印功能
在项目中使用:
在react中实现打印功能在打印区域用ref获取dom.

然后在组件内调用:
在react中实现打印功能
下面是我测试的效果图:
在react中实现打印功能
这里附上插件github地址:https://github.com/gregnb/react-to-print