Changing document layout on print

1. 인쇄시 css 다르게 하기 : css media query 사용

@media print {

  /* 인쇄시에만 적용되는 스타일들 */

}

 

2. 인쇄시 javascript로 HTML 바꾸기

if ( document.all && window.print ) {
  window.onbeforeprint = function() {

    // 인쇄 전

  };
  window.onafterprint = function(){

    // 인쇄 후

  }
} else if ( window.matchMedia ) {
  var mediaQueryList = window.matchMedia('print');
  mediaQueryList.addListener(function(mql) {
    if (mql.matches) {
      // onbeforeprint equivalent
    } else {
      // onafterprint equivalent
    }
  });

}

 

참고 : http://tjvantoll.com/2012/06/15/detecting-print-requests-with-javascript/