[React/TypeScript]특정 영역 프린트 기능 구현

react에서 인쇄기능을 사용할 때 reat-to-print라는 라이브러리를 사용 할 수도 있지만 생각보다 간단한 기능이라 window.print() 함수를 사용하여 만들었다.

 

import useRef from 'react';
import ReactDOM from 'react-dom';

const printRef = useRef<HTMLDivElement>(null);

  const onClickPrint = () => {
    if (ReactDOM && ReactDOM.findDOMNode(printRef.current)) {
      const printContent = ReactDOM.findDOMNode(printRef.current) as HTMLElement;
      const printContents = printContent.innerHTML;
      const windowObject = window.open(
        '',
        'PrintWindow',
        'width=1000, height=800, top=100, left=300, toolbars=no, scrollbars=no, status=no, resizale=no',
      );
      if (printContents && windowObject !== null) {
        windowObject.document.writeln(printContents);
        windowObject.document.close();
        windowObject.focus();
        windowObject.print();
        windowObject.close();
      }
    }
  };

여기서 windowObject.document.writeln(printContents) 은 window.open() 함수로 열린 창에 프린트 될 영역을 주입한다.

 

또한 타입스크립트가 사용되었기 때문에 타입표명을 해주지 않으면 Property 'innerHTML' does not exist on type 'Element' 같은 오류가 나게 되므로 타입표명을 해주었다.

<div ref={printRef}>
 ...
</div>

마지막으로 프린트 될 영역에 ref를 주어 인쇄 될 영역을 알려준다.