자바스크립트 A4 용지에 맞게 프린트하기 (엣지 최적화)

자바스크립트로 화면의 내용을 버튼 클릭하면 A4 용지에 맞제 프린트해주기 !!

<style type="text/css">
@media print {
    html, body { -webkit-print-color-adjust:exact; width: 210mm; height: 297mm; }
    table { page-break-inside:auto; }
    tr    { page-break-inside:avoid; page-break-after:auto; }
    thead { display:table-header-group; }
    tfoot { display:table-footer-group; }
}
@page { size: A4 portrait; margin: 20mm 10mm 0mm 10mm; }
</style>

<div class="adminContents" id="adminContents">
<form>
<table>
<tbody>
<tr>
<th>제목</th>
<td>내용</td>
</tr>
</tbody>
</table>
</form>
</div>

<button type="button" class="button02" onclick="content_print()">출력</button>

function content_print(){
		
		document.getElementById("buttonArea02").style.display = 'none';
		
		var initBody = document.body.innerHTML;
		
		window.onbeforeprint = function(){
			document.body.innerHTML = document.getElementById('adminContents').innerHTML;
		}
		window.onafterprint = function(){
			document.body.innerHTML = initBody;
		}
		window.print();    
	}

기본적은 로직은 버튼 클릭시 해당 버튼을 안보이게 처리하고 body 부분만을 프린터하도록 하는 것 !!

 

@page { size: A4 portrait; margin: 20mm 10mm 0mm 10mm; } 는 위, 왼, 아래, 오른쪽 여백이고

나머지 설정들은 정확히 기억이 안나는데 A4 용지 실제 사이즈를 넣는거랑

프린트시 url 노출안되게 하는 설정이 있었던 것 같다.

 

엣지에서는 url 제거와 화면도 잘맞게 나온던데

크롬에서는 잘안되서어.. 크롬에서도 잘되는 건 좀 더 찾아봐야 할 것 같다 ㅠㅠ

 

추가로  @page :first { size: A4 portrait; margin: 20mm 10mm 0mm 10mm; }

첫 페이지 설정 예시 !!

 

다시 추가로 나같은 경우는 @page { size: A4 portrait; margin: 20mm 10mm 0mm 10mm; }

이 부분에 상단 20mm 주니까 여러장 인쇄시 빈 페이지가 발생했음 ㅠㅠ

 

그래서 아래와 같이 margin: 0 !important; padding: 0 !important; 를 추가해주니 해결됐음 !!

html, body { -webkit-print-color-adjust:exact; width: 210mm; height: 297mm; margin: 0 !important; padding: 0 !important; }