print css

@media print {
    html, body {
        height:100vh !important;
        overflow-y:hidden !important;
        transform: scale(1);
    }

    .no-print {
        display: none !important;
    }

    html, body {
        size:297mm 210mm;
        margin: 0;
        padding: 0;
        page-break-after: avoid;
        page-break-before: avoid;
    }

    body {
        visibility: hidden;
        padding: 0;
    }

    * {
        float: none !important;
    }

    .page-divide {
        visibility: visible;
        page-break-before: avoid;
        page-break-after: avoid;
        page-break-inside: avoid;
    }

    .page {
        overflow:hidden;
    }

    @page {
        size: A4 landscape;
        margin: 0;
    }
}

@media print

• 인쇄 페이지용 미디어 쿼리

• 프린트(cmd + p) 화면에서 적용할 CSS를 @media print로 설정할 수 있다

• 페이지에서 숨겨야하는 부분은 display 또는 visible로 제어할 수 있다

@page

• margin : 머리글/바닥글 제거
• size: A4 landscape;
  • 사이즈를 A4로 지정하고
  • landscape를 붙이면 가로 출력이 기본으로 설정된다

반복되는 컨텐트 및 빈 페이지 그리고 위치가 맞지 않는 이슈

• size:297mm 210mm;

• transform: scale(1);

• size를 A4사이즈에 맞게 297mm 210mm 로 설정을 하니 페이지의 컨텐트가 반복되거나 빈페이지가 여러개 보여지는 문제가 있었다

  • transform: scale(1)을 적용하니 해결되었다

• 추가로 position: fixed 또는 absolute가 해당 이슈를 만들어내기도 해서 인쇄 화면에서 적용되는 CSS에 fixed와 absolute 대신 static을 적용하여 해결하였다

참고

• https://eunyoe.tistory.com/15
• https://developer.mozilla.org/en-US/docs/Web/CSS/@media
• https://developer.mozilla.org/en-US/docs/Web/CSS/Paged_Media
• https://developer.mozilla.org/en-US/docs/Web/CSS/@page
• https://velog.io/@may54ther/%EB%82%B4%EA%B0%80-%ED%8E%B8%ED%95%98%EB%A0%A4%EA%B3%A0-%EC%A0%95%EB%A6%AC%ED%95%98%EB%8A%94-%EC%9D%B8%EC%87%84-%EA%B4%80%EB%A0%A8-CSS