[React] window.print

window.print() 함수를 사용하면 브라우저를 쉽게 인쇄할 수 있다.

window.print() 는 기본적으로 document.body.html 을 바라보기 때문에 만약 어떠한 영역을 인쇄하고 싶다면 html 값을 변경해 줘야 한다.

기본 윈도우 사용

in React

let ReactDOM = require('react-dom');
...
printFunc = () => {  
    var printContents = ReactDOM.findDOMNode(this.refs.printArea).innerHTML);
    var originalContents = document.body.innerHTML;
    document.body.innerHTML = printContents;
    windows.print();
    document.body.innerHTML = originalContents;
}

...
<ComponentName ref="printArea" />
<Button onClick={this.printFunc}>
...

in JavaScript

<div id="printableArea">
    <h1>Print me</h1>
</div>

<input type="button" onclick="printDiv('printableArea')" value-"print a div!" />

function printDiv(divName) {
    var printContens = document.getElementById(divName).innerHTML;
    var originalContents = document.body.innerHTML;

    document.body.innerHTML = printContents;

    window.print();

    document.body.innerHTML = originalContents;
}

새로운 윈도우를 추가하여 인쇄하는 방법

in JavaScript

function printDiv(printContent) {
    var documentContent = getElement(printContent);
    var windowObject = window.open('', "PrintWindow", "width=5, height=5, top=200, lefg=200, toolbars=no, scrollbars=no, status=no, resizable=no");

    windowObject.document.writeln(documentContent.innerHTML);
    windowObject.document.close();
    windowObject.focus();
    windowObject.print();
    windowObject.close();
}

in React

let ReactDOM = require('react-dom');

printContent: function(el) {
    var printContents = ReactDOM.findDOMNode(el).innerHTML;
    var windowObject = window.open('', "PrintWindow", "width=5, height=5, top=200, lefg=200, toolbars=no, scrollbars=no, status=no, resizable=no");

    windowObject.document.writeln(documentContent.innerHTML);
    windowObject.document.close();
    windowObject.focus();
    windowObject.print();
    windowObject.close();
}

window.open 속성

1. width: 창 가로길이
2. height: 창 세로길이
3. toolbar: 단축도구창 유뮤 (yes/no)
4. menubar: 메뉴창 유무 (yes/no)
5. location: 주소창 유무 (yes/no)
6. scroolbars: 스크롤바 유무 (yes/no)
7. status: 아래 상태바창 유무 (yes/no)
8. realzable: 창변형 유무 (yes/no)
9. fullscreen: 전체화면 유무 (yes/no)
10. channelmode=yes: 앞&뒤로 창 최소화, 닫기 등을 설정 (F11키랑 같음)
11. left=0, top=0: 창을 왼쪽 구석에 고정

window.open("파일명", "윈도우이름", "창속성");