React 특정 컴포넌트 인쇄하기

회사 프로젝트에서 구직자의 이력서와 리포트를 출력하는 기능을 구현해야 했다. 전체 화면이 아닌, 특정 컴포넌트만을 출력하기 위해 react-to-print 라이브러리를 사용하였다.

💡 구현 예시

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

export default function Example() {
  const componentRef = useRef();
  
  return (
    <div ref={componentRef}>
    	// ~ 출력할 영역 ~
    <div>
	<ReactToPrint 
		trigger={() => <button type3="true">인쇄</button>} 
		content={() => componentRef.current} 
        pageStyle="@page { size: A4; ratio:60%; }" 
	/>
  );
};

기본적인 사용법은 useRef를 사용하여 ref객체를 만들고, 출력 하고 싶은 영역에 ref값으로 설정해준다. 버튼을 생성할 위치에 <ReactToPrint>를 import 한다. trigger에 버튼을 출력 버튼을 생성, content에 프린트 할 영역에 ref를 참조해준다.

---

❗ 겪었던 문제

1. 짤림 현상

출력할 영역 길이가 길어 1장을 넘어가게 되면 다음 페이지로 넘어갈 때 짤림 현상이 발생한다.

2. 프린트 미리보기 화면에 background-color 나오지 않음

옵션에서 사용자가 직접 지정할 수 있지만, 영역 내의 배경색이 무조건 출력되게 하고 싶었다.

.section {
  break-inside: avoid;
  print-color-adjust: exact;
}

출력 할 영역에 className을 section으로 지정해주고 위와 같이 printStyle.css 생성한 뒤
react-to-print를 사용하는 컴포넌트에 같이 import 해주었다.