[HTML/CSS/JS] A4 사이즈로 페이지 인쇄하기

출처:https://m.blog.naver.com/ojhwlxk/220589401616

 

 HTML  (html, header, body 형식은 생략합니다~~)

 

<div class="page">

<div class="subpage">인쇄영역!!</div>

</div>

 

 

 CSS 

 

body {

margin: 0;

padding: 0;

}

* {

box-sizing: border-box;

-moz-box-sizing: border-box;

}

.page {

width: 21cm;

min-height: 29.7cm;

padding: 2cm;

margin: 0 auto;

background:#eee;

}

.subpage {

border: 2px red solid;

background:#fff;   

height: 257mm;

}

 

@page {

size: A4;

margin: 0;

}

@media print {

html, body {

width: 210mm;

height: 297mm;

}

.page {

margin: 0;

border: initial;

width: initial;

min-height: initial;

box-shadow: initial;

background: initial;

page-break-after: always;

}

}

 

 

 JS 

 

window.print();

 

 

 

그리고 .page 에 배경이미지를 넣었었는데 크롬에서는 그림 없이 텍스트만 인쇄되더라고요.

크롬에 따로 체크란이 있습니다.

 

'+ 설정 더보기'를 누르면 '배경 그래픽' 체크체크~

(그래도 안되면........... 제가 그랬어요ㅜ 배경이미지를 body에 주세요ㅜ 그렇게 전 해결!)

 

 

 

 

이번에는 이렇게 해결하고 넘어갔는데요.
아직 부족한 느낌이 없잖아 있네요ㅎ

 

그래도 도움이 되셨길 바랍니다~*

 

 

 

http://stackoverflow.com/questions/16649943/css-to-set-a4-paper-size