프린트 시 원하는 레이아웃을 만드는 방법: CSS

✏️ Front Lab's Tech Blog

CSS

2024.08.19.

웹에서 프린트 기능을 구현할 때, 일반적인 화면과는 다른 레이아웃을 출력해야 하는 경우가 있습니다. 이번 포스트에서는 프린트할 때 화면을 CSS로 어떻게 수정할 수 있는지를 예시와 함께 설명하겠습니다.

1. 프린트 버튼 핸들러 구현

프린트를 트리거하는 간단한 함수는 다음과 같습니다. 프린트 기능을 추가할 페이지에 window.print() 메서드를 사용하여 브라우저의 프린트 창을 호출하고, 제목(title)을 변경하는 기능을 추가했습니다.

const handlePrint = () => {
  const originalTitle = document.title
  document.title = `Transaction-Receipt-${router.query.id}`
  window.print()
  document.title = originalTitle
}

이 함수는 실제 프로젝트에서 사용한 예시로, 프린트할 때 페이지의 제목을 영수증 형식으로 변경하고, 프린트 후 원래 제목으로 복구하는 방식입니다.

2. CSS로 프린트 스타일 적용

프린트 시 출력되는 레이아웃을 조정하기 위해 @media print 규칙을 사용합니다. 이 CSS 규칙을 이용하면, 프린터 출력 전용 스타일을 아래와 같이 정의할 수 있습니다.

@media print {
  body * {
    visibility: hidden;
  }
  .receipt-print-container,
  .receipt-print-container * {
    visibility: visible;
  }
  .receipt-print-container {
    position: relative;
    width: 190mm;
    height: auto;
    height: fit-content;
    max-width: none;
    display: flex;
    flex-direction: column;
    overflow: visible;
  }
}

3. 프린트 컨테이너에 스타일 적용하기

정의한 CSS 스타일을 프린트할 영역에 적용하려면 아래와 같이 className에 스타일을 지정합니다.

<Box
  ref={targetRef}
  className="receipt-print-container"
  sx={{ display: 'flex', justifyContent: 'center' }}
>
  // print 해야할 내용들
</Box>

이 방식으로 프린트해야 할 내용을 포함한 컨테이너에 스타일을 적용하여, 프린트 시 보게되는 레이아웃을 제공합니다.