[React] 버튼 눌러서 프린트 출력하기

[JS] window.print()를 사용하여 프린트 영역 출력하기

이전에 정리해둔 게시물을 참고해서 Next.js(React)에서 기능을 구현해보니 몇 가지 문제점이 발생하였다.

 

1) window.print()만 사용하는 경우 잘 동작하지만, window.onbeforePrint(), window.onafterPrint()를 사용하면 출력 버튼이 한 번만 동작한다. (다시 눌러도 동작은 안 함)

2) 1번에서 발생한 문제 때문인 지 몰라도 원하는 영역 선택이 어려웠다.

---

이런 문제들이 있어서 React 버전으로 찾아보다가 react-to-print 라이브러리를 사용하게 되었다.

react-to-print

 

1. 터미널에 react-to-print 라이브러리를 설치한다.

npm i react-to-print

 

2. 아래 틀을 붙여 넣어서 원하는 기능으로 활용한다.

 

이때 ComponentToPrint 컴포넌트에 출력하고 싶은 컴포넌트를 삽입하고 ref를 삽입하면 된다.

import React, { useRef } from 'react';
import ReactToPrint from 'react-to-print';

import { ComponentToPrint } from './ComponentToPrint';

const Example = () => {
  const componentRef = useRef();

  return (
    <div>
      <ReactToPrint
        trigger={() => <button>Print this out!</button>}
        content={() => componentRef.current}
      />
      <ComponentToPrint ref={componentRef} />
    </div>
  );
};

---

+ 추가 (scroll이 발생한 경우 scroll로 가려진 부분은 프린터 미리보기 화면에 출력되지 않음)

위 문제를 해결하기 위해서 onBeforeGetContent와 onAfterPrint 속성 함수를 사용함

 

- onBeforeGetContent는 window.onbeforeprint와 동일한 기능을 수행한다고 볼 수 있다.

출처 : https://github.com/gregnb/react-to-print

즉, 인쇄하기 전(미리보기 화면이 출력되기 전)에 출력하고자 하는 화면의 UI를 변경 할 수 있다.

 

나는 onBeforeGetContent 콜백함수에서 출력하고자 하는 화면에 className="scroll"을 삭제 해주었다.

- onAfterPrint는 window.onafterprint와 동일한 기능을 수행한다고 볼 수 있다.

출처 : https://github.com/gregnb/react-to-print

즉, 미리보기 화면이 출력된 후 취소 or 출력 버튼을 눌렀을 때 실행되는 콜백 함수이다.

나 같은 경우에는 onBeforeGetContent에서 className에 scroll을 지운 경우 scroll을 추가 해줄 때 사용했다.