创建 iframe或者 新窗口打印你想要的一部分。如果你不喜欢使用这两种方式不妨考虑下 a-x-/react-easy-print
npm install --save rc-print-
local demo:
git clone [email protected]:hanzhangyu/rc-print.git npm install npm start
然后在浏览器打开 http://127.0.0.1:8080/。
npm run test在Print组件内不需要打印的请使用媒体查询隐藏。
css
@media print{
.printHide{
visibility: hidden;
}
}js
class demo extends Component {
render() {
return (
<div>
<button
onClick={() => {
this.refs.test.onPrint();
}}
>print
</button>
<Print
ref="test" insertHead
>
<div>
<p>show</p>
<p className="printHide">hide</p>
</div>
</Print>
</div>
);
}
}更多用法见 https://hanzhangyu.github.io/rc-print
| 名称 | 默认值 | 描述 |
|---|---|---|
| insertHead | true | 是否插入目前页面的head标签 |
| ignoreHeadJs | true | 当insertHead启用时是否屏蔽JS文件 |
| bodyStyle | false | 是否插入目前页面的body中的style标签（不推荐写在body中） |
| otherStyle | undefined | 其他的样式作为字符串插入head最后 |
| isIframe | true | true使用iframe，否则使用新窗口 |
| iframeStyle | 'position:absolute;width:0px;height:0px;' | iframe的样式 |
| winStyle | 'toolbar=no,menubar=no' | 新窗口的初始样式 |
| title | undefined | iframe或者新建窗口的title |
| preventDefault | false | 是否替换浏览器原生的打印快捷键 |
| lazyRender | false | 异步渲染，只在打印时渲染 |
| clearIframeCache | false | 是否清理dom缓存。否的情况下，如props为改变将保留并直接使用上次打印留下的dom |
| singletonCache | true | 当clearIframeCache关闭时生效。类单例模式，当界面有多个设置了singletonCache打印组件时，最多允许保留一个缓存 |
| onStart | function(){} | 打印渲染开始 |
| onEnd | function(){} | 打印渲染结束并且页面加载完成 |
提取核心代码与react分离，或者寻找类似的无依赖代码，欢迎推荐。
MIT@PaulHan.