sveltekit에서 프린팅 하는 노하우 (scoped css)

웹으로 회사전산 시스템을 만들때 필연적으로 문서를 프린팅을 해야하는 기능이 필요하다.

스벨트킷에서 프린팅 기능을 만들때 필요한 CSS태그를 알아보자

 

내가 원했던 방법은 특정 요소만 프린팅을 하고 싶었다. 

div가 두개가 있는데 하나는 인풋용 하나는 출력용 프리뷰인 셈이다.

또한 출력할 화면에는 내가 원하지 않는 Navigation bar가 들어있었다.

 

 

인터넷을 찾아보니 아래와 같은 방법이 있었다.

function printDiv(divName) {
     var printContents = document.getElementById(divName).innerHTML;
     var originalContents = document.body.innerHTML;

     document.body.innerHTML = printContents;

     window.print();

     document.body.innerHTML = originalContents;
}

즉, 출력할 요소만 html로 만든뒤 출력 후 복사해낸 원래의 화면을 넣어주는 것이다. 프린팅은 되지만 원래 화면을 넣어줬을때 더 이상 스벨트킷이 아니게 된다. 

 

그래서 다른 방법을 적용하기로 하였고 이것은 CSS를 사용하는 방법이다.

프린팅 시 CSS에서 원하는 요소만 visible을 해주고 원하지 않는 요소는 display none을 해주는 방법이다. 여기에도 작은 문제가 있었다. layout에 추가한 navigation 까지 출력이 되는 것이였다. 어떻게 해결해야할지 몰라서 아는 방법으로 임시방편으로 링크를 통해 문서를 출력하는 페이지로 가게 만들고 그 스벨트 폴더에 __layout.reset.svelte를 추가해서 그페이지만 레이아웃 자체를 초기화 시켜버렸다.

  @media print { 
  
      @page {
          size: a4;
      }     
      #main_page{
        display: none;
      }
      #print-area {
        margin: auto;
        width: 220mm;
        min-height: 300mm;
        visibility: visible;
      }
   
     
  }

 

그렇게 쓰고 있다가 문제는 결국 CSS가 적용되는 scope의 문제 였다는게 떠올랐다. (문제가 뭔지 모르면 뭘 구글링 해야할지도 모른다.) 문제를 정확하게 알게 되니 답은 이미 나와있었다.

 

navigation 요소에 id를 만들고 css에 :global(#nav){} 를 추가한다. 여기서 :global()을 사용시 모든 컴포넌트의 # . 요소명이 있으면 CSS에 적용이 된다.

이 방법을 통해 컴포넌트파일 이외의 영역의 스타일을 변경하였다.

이래저래 검색하다가 찾게된 :not(요소명){} 저 요소명 빼고 다 스타일 적용도 유용하게 쓰일거 같다.

 

주의할것은 부모요소를 display: none해버리면 정작 출력하려는 자식요소도 안보여지게 되므로 프린트 하지 않을 형제요소와 다른 특정요소를 display: none하는 방법을 사용한다.  

 

  @media print { 
  
      @page {
          size: a4;
      }
      /* 추가 */
      :global(#nav){
        display: none;
      }
      #main_page{
        display: none;
      }
      #print-area {
        margin: auto;
        width: 220mm;
        min-height: 300mm;
        visibility: visible;
      }
   
     
  }