rc-print

1.0.4 • Public • Published

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

NPM version Build Status Coverage Status NPM downloads

中文请看这里

1. Install

npm install --save rc-print

How to run the demo:

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

  2. local demo:

    git clone git@github.com: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
ignoreHeadJs true Ignore the js files when insertHead is enabled
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, rendering when printing only
clearIframeCache false Clean up the DOM cache.if props changes, it will retain and directly use the DOM left in the last print when choose false
singletonCache true Works when clearIframeCache is false. Like Singleton pattern, only one cache will be save when there is multiple component which has a true singletonCache props
onStart function(){} Begin to print
onEnd function(){} Render print page finish

4. Feature

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

5. LICENSE

MIT@PaulHan.

Readme

Keywords

Package Sidebar

Install

npm i rc-print

Weekly Downloads

455

Version

1.0.4

License

MIT

Unpacked Size

29.5 kB

Total Files

6

Last publish

Collaborators

  • paulhan