[react] 인쇄

page-break-after : avoid

인쇄

작업을 하다가, 인쇄를 해야하는 페이지가 생겼다.

바로 구글링 후 적용!

@media print를 이용하면 할 수 있었다.

@media print {
  @page {
    margin: 0;
  }
  
  .portrait {
    page-break-after: avoid !important;
  }

  .area {
    visibility: hidden;
  }
}

-> page에 margin을 없애주고 인쇄 버튼을 클릭해서 인쇄 창을 열어야 하는데 그 인쇄 창은 인쇄할 때 보이면 안 되니까,

.area 설정해주고, visibility를 hidden으로 설정해주었다.

그리고 이제 실제 내용이 들어갈 아래 태그를 하나 더 만든 후

.elect-container {
  width: 21cm;
  height: 28cm;
  padding: 30px 0 0 0;
  background-color: white;
  position: relative;
  z-index: 1;
}

-> A4 사이즈인 21cm, 28cm 설정 후 나머지 적용!

인쇄 틀 만들기 성공!

    <div
      id="print"
      className={oneclick.print}
      style={{
        height: '100%',
        padding: '16px 0px 0px 0px',
        printColorAdjust: 'exact',
        backgroundColor: '#d9d9d9',
      }}
    >
      <div
        className={`${oneclick.portrait} ${oneclick['elect-container']}`}
        style={{
          margin: 'auto',
        }}
      >
      </div>
   </div>

인쇄 버튼 만들기

아까 css 적용했던 area를 적용해준 후 onClick시 window.print()를 해주면 된다!

      <Button
        variant="contained"
        className={oneclick.area}
        sx={{
          width: '80px',
          height: '80px',
          borderRadius: '50%',
          position: 'fixed',
          right: 50,
          bottom: 50,
          zIndex: 3000,
        }}
        onClick={() => window.print()}
      >
        <LocalPrintshopIcon fontSize="large" />
      </Button>

next.js에서 css 파일 만들기

styles 폴더에 내가설정할이름.module.css 파일을 파준 후 (나는 oneclick을 사용하였다)

import를 해주고

import oneclick from '../../styles/oneclick.module.css';

className에 요로코롬 작성!

className={oneclick.area}

이슈사항

페이지가 2페이지인데도 불구하고 계속해서 빈 페이지까지 합쳐 3페이지가 나오는 현상이 있었다..

  .portrait {
    page-break-after: avoid !important;
  }

이 속성을 주어 해결!