window.print() 사용할 때 css까지 잘 적용시키는 방법

여러 가지 해결방법을 찾아봤는데 크게 2가지 방법을 통해 구현할 수 있다.

 

1) jquery 이용하기

$(function() {
	var g_oBeforeBody = $('#section-to-print').html();

	jQuery('.print_btn').click( function() {

		
		window.onbeforeprint = function (ev) {
			document.body.innerHTML = g_oBeforeBody;
		};

		

		window.print();
		location.reload();

		
	});
});

 

위의 방법은 내 프로그램에 적용시켜보니 시원찮았다.

 

2) css 이용하기

<style>
@media print {
  body {
	visibility: hidden;
  }
  #section-to-print {
	visibility: visible;
	position: absolute;
	left: 0;
	top: 0;
  }
  
	
	* {
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
  }
}
</style>

 

여기서 핵심은

* {
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
  }

 

 

위의 스크립트다.

 

해당 구문을 갖고 하면 잘 나타난다.