HTML 부분 엘리먼트 영역 프린트하기 - @media print

   HTML 부분 엘리먼트 영역 프린트하기 - @media print

HTML에서 부분 영역을 출력하고 싶을때는 @media의 print옵션을 사용하도록 한다.

괜히 js library나 plug-in 으로 삽질하지 말고 이쪽으로 해결하는 것이 제일 속편하고 강력하다.

   사용시 주의점

주의할점은 배경(background)은 상황에 따라 출력이 되지 않으므로 

배경색상이나 배경이미지는 img Tag에 넣고 출력해야 할 수 있다.

(애초에 설계할때 프린트와 연관된 화면이라면 배경에 이미지를(background-image) 넣지 말자... 

background-position옵션의 contain이나 cover등 참으로 유용한 옵션이 많은데..ㅠ 포기해야한다

그래서 부득불 이렇게 사이즈 계산을....)

   사용법

1. 백그라운에 색상이나 이미지 넣으면 출력이 안되고 흰 여백으로 나올 가능성이 많다. 

  (정확히 어떤 상태인지 분석시도를 하지 못하겠다. 그러므로 포기하기전에

  -webkit-print-color-adjust: exact;   로 출력되는지 먼저 시도하자.

   스펙 : https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-print-color-adjust  )

2. 프린트 출력을 원치 않는 Tag는 opacity:0  visibility:hidden  display:none  으로 확실히 가려준다.

  (display:none 처리를 해도 element가 보일때가 있다... visibility:hidden과 같이 사용하여 해결하였다 

   그냥 안전하게 3개 다 선언하자 )

3. position:fixed; top:0 left:0 은 필수고(당연하게) 나머지 옵션은 출력을 원하는 상황에 맞추어 적절히 수정한다.

@media print{

    .nav-wrap, 

    #left-menu,

    #setColor_area,

    .mapbtn-container{opacity:0;visibility:hidden;display:none;}


    #contents-wrap{margin-left: 0}

    .myDivToPrint {

    visibility: visible;

    /*background-color: white;*/

    height: 100%;

    width: 100%;

    position: fixed;

    top: 0;

    left: 0;

    margin: 0;

    padding: 15px;

    font-size: 14px;

    line-height: 18px;

    }

    #map_area{

    -webkit-print-color-adjust: exact; 

    }

}

* 2019.11.07 내용추가

콘텐츠가 길어져서 여러장이 출력되어야 할때는 아래 속성을 적용한다

position: fixed 대신 => position: absolute

@media print{

   html, body{width:100%; height:100%; overflow: visible}

   #print-area{

      position: absolute;

      height:100%;

      overflow: visible;

   }

}

   실제 사용 소스 ( ↓ print.zip 다운로드 )

print.zip

   출력 결과