https://github.com/hanzhangyu/rc-print
print easily
https://github.com/hanzhangyu/rc-print
print react
Last synced: 11 months ago
JSON representation
print easily
- Host: GitHub
- URL: https://github.com/hanzhangyu/rc-print
- Owner: hanzhangyu
- License: mit
- Created: 2017-08-30T13:05:13.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2018-03-03T17:32:19.000Z (over 8 years ago)
- Last Synced: 2024-10-29T05:38:27.498Z (over 1 year ago)
- Topics: print, react
- Language: JavaScript
- Homepage: https://hanzhangyu.github.io/rc-print
- Size: 157 KB
- Stars: 24
- Watchers: 3
- Forks: 10
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# rc-print
Create a `iframe` or `new window` to print a part of page what you want. Considering the [a-x-/react-easy-print](https://github.com/a-x-/react-easy-print) if you don`t like to use these two methods
[](https://npmjs.org/package/rc-print)
[](https://www.travis-ci.org/hanzhangyu/rc-print)
[](https://coveralls.io/github/hanzhangyu/rc-print?branch=master)
[](https://npmjs.org/package/rc-print)
[中文请看这里](./README_zh-CN.md)
# 1. Install
```sh
npm install --save rc-print
```
#### How to run the demo:
1. https://hanzhangyu.github.io/rc-print
2. local demo:
```sh
git clone git@github.com:hanzhangyu/rc-print.git
npm install
npm start
```
then open [http://127.0.0.1:8080/](http://127.0.0.1:8080/) in your browser.
#### How to run the test:
```sh
npm run test
```
# 2. Usage
Use media query to hide the part which is no need to print in the `Print` component.
> css
```css
@media print{
.printHide{
visibility: hidden;
}
}
```
> js
```js
class demo extends Component {
render() {
return (
{
this.refs.test.onPrint();
}}
>print
show
hide
);
}
}
```
更多用法见 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](https://developer.mozilla.org/en-US/docs/Web/API/Window/open#Window_features) |
| 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](https://github.com/hanzhangyu).