README_zh-CN.md

rc-print

创建 iframe或者 新窗口打印你想要的一部分。如果你不喜欢使用这两种方式不妨考虑下 a-x-/react-easy-print

1. 安装

npm install --save rc-print

如何使用demo:

1. https://hanzhangyu.github.io/rc-print

2. local demo:

   git clone git@github.com:hanzhangyu/rc-print.git
   
   npm install
   
   npm start

   然后在浏览器打开 http://127.0.0.1:8080/。

如何单元测试:

npm run test

2. Usage

在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

3. Props

名称	默认值	描述
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(){}	打印渲染结束并且页面加载完成

4. Feature

提取核心代码与react分离，或者寻找类似的无依赖代码，欢迎推荐。

5. LICENSE

MIT@PaulHan.