rc-print

Create a iframe or new window to print a part of page what you want. Considering the a-x-/react-easy-print if you don`t like to use these two methods

中文请看这里

1. Install

npm install --save rc-print

How to run the demo:

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

2. local demo:

   git clone [e-mail]:hanzhangyu/rc-print.git
   
   npm install
   
   npm start

   then open http://127.0.0.1:8080/ in your browser.

How to run the test:

npm run test

2. Usage

Use media query to hide the part which is no need to print in the Print component.

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	Insert the head tag
bodyStyle	false	Insert the style tag in the body (unrecommended method to write style)
otherStyle	undefined	Other styles are inserted into the style tag which will be created in the last of head
isIframe	true	Use iframe if it`s true, otherwise new window will be used
iframeStyle	'position:absolute;width:0px;height:0px;'	The style of iframe
winStyle	'toolbar=no,menubar=no'	The style of new window
title	undefined	The title of iframe or new window
preventDefault	false	Replace the shortcut key of the browser's native print
lazyRender	false	async render

4. Feature

Pick up the core code to separate with react, or find it. Besides, welcome to recommend.

5. LICENSE

MIT@PaulHan.