[React] reactToPrint - React Component 프린트 및 PDF 저장

react-to-print

react component 인쇄와 pdf 저장 기능 제공

 

---

설치 방법

# npm install
npm i react-to-print
# yarn install
yarn add react-to-print

 

---

props

props는 다양하지만 내가 사용한 2가지 props만 설명할 것임

사용가능한 props는 npm 공식 문서에서 확인 가능

Name	Type	설명
contnet	function	구성요소 참조 값을 반환하는 함수 이 참조 값의 내용을 인쇄
documentTitle	String	파일로 저장할 때 인쇄할 제목 설정

 

---

사용 방법(함수형 컴포넌트)

1. import useReactToPrint 하기

import {useReactToPrint} from 'react-to-print';

여기서 ReactToPrint가 아닌 useReactToPrint를 사용한 이유는?

함수형 컴포넌트를 사용하고 있기 때문

ReactToPrint	useReactToPrint
클래스형 컴포넌트에서 사용하며 ReactToPrint 컴포넌트를 렌더링하여 프린트 작업 트리거	함수형 컴포넌트에서 사용하며 React의 훅인 useReactToPrint를 사용하여 프린트 작업 트리거

 

2. 버튼 생성과 이벤트 핸들링

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

    /* 클릭 이벤트 */
    const onClickEvent = () => {
        // 버튼 클릭 이벤트
        ...

        // 프린트 함수 호출
        handlePrint();
    }

    /* print */
    const handlePrint = useReactToPrint({
        content: () => componentRef.current,
        documentTitle: ‘파일명’,
    });

    return(
        <button onClick={onClickEvent}>프린트 하기</button>
        <ReportTemplate ref={componentRef} />
    )
}

나의 경우 버튼 클릭 이벤트로 상태값을 변경해야 했기에 클릭 이벤트를 따로 정의해줌

프린트 혹은 pdf 저장을 바로 해도 괜찮다면 onClick={handlePrint} 바로 호출하면 됨

 

3. 프린트 할 컴포넌트를 만들어줬다면 상단에 ref 연결하기

const ReportTemplate =(props, ref)=> {
    return (
        <div ref={ref} className=‘report-template’>
        ...
        </div>
    )
}