[javascript] 팝업창 열고 지정 영역 제외 인쇄하기

 

[javascript] 팝업창 열고 지정 영역 제외 인쇄하기

 

영수증 팝업을 만들고 팝업 안에 프린트하기 버튼을 만든 후에, 버튼을 누르면 버튼을 제외한 영역이 인쇄되게끔 만드는 작업을 진행하였습니다.

필요한 화면은 총 두가지로,
영수증을 띄워야 하는 버튼이 있는 화면과
영수증과 프린트하기 버튼이 있는 화면이 필요합니다.

영수증을 띄워야 하는 버튼이 있는 화면부터 보겠습니다.
button 태그와 script를 만들어줍니다.

 

<button onclick="pop();">Pop</button>
<script type="text/javascript">
let POP;
function pop() {
POP = window.open('pri.html', 'thePopup', 'width=722,height=480')
};
</script>

 

그 다음 영수증과 프린트하기 버튼이 있는 화면을 만들어줍니다.

 

*HTML

 

<div id="wrap">
	<div class="order">[영 수 증]</div><br>
	<div class="container">
		<div class="info">
			[매 장 명] <br><br>
			<span class="adress">[주 소]</span><br><br>
		[대 표 자] 최종일 [TEL] <br><br>
		</div>
		============================
		<div class="info2">
			<ul class="title">
				<li>메 뉴 명</li>
				<li>단 가</li>
				<li>수 량</li>
				<li>금 액</li>
			</ul>
		</div>
		------------------------------------------------
		<div class="info2">
			<div class="pay">음식명</div>
			<ul class="orders">
				<li>000046</li>
				<li>9,900</li>
				<li>1</li>
				<li>9,900</li>
			</ul>
		</div>
		------------------------------------------------
		<div class="info2">합 계 금 액
			<div class="price">9,900</div>
		</div>
		------------------------------------------------
		<div class="info2">
			<ul class="vat">
				<li>부가세 과세물품가액</li>
				<li>부가세</li>
			</ul>
			<ul class="vat">
				<li>------</li>
				<li>------</li>
			</ul>
		</div>
		------------------------------------------------
		<div class="info2">받 을 금 액
			<div class="price">9,900</div>
		</div>
	</div>
	<button id="noprint" onclick="pops();">프린트하기</button>
</div>
<script>
function pops(){
	window.print();
	return false;
}
</script>

 

*CSS

 

html,body {
	margin:0px;
	padding:0px;
}
body, h1, h2, h3, h5, h6, li, p { 
	font-family: sans-serif, '맑은고딕', 'MalgunGothic' !important;
}
ul,li {
	margin:0px;
	padding:0px;
	list-style:none;
}
#wrap {
	margin:0 auto;
	text-align:center;
}
.container {
	overflow:hidden;
	margin:0 auto;
	width:220px;
	text-align:left;
	font-size:11px;
}
.order {
	padding-top:20px;
	font-weight:900;
	font-size:13px
}
.adress {
	letter-spacing:2.8px;
}
.info {
	margin-bottom:2px;
}
.info2 {
	line-height:2;
}
.info2:last-child {
	font-size:13px;
	font-weight:700
}
.pay {
	margin-bottom:-7px
}
.price {
	display:inline-block;
	float:right;
	padding-right:4px;
}
.title > li{
	display:inline-block;
	padding-right:25px;
}
.orders > li {
	display:inline-block;
	padding-right:23px;
}
.title > li:last-child, .orders > li:last-child {
	float:right;
	padding-right:4px;
}
.vat {
	display:inline-block;
	margin:3px 0px;
	line-height:1.5;
}
.vat:first-child {
	padding-left:30px;
}
.vat:last-child {
	float:right;
	padding-right:4px;
	text-align:right;
}
#noprint {
	margin-top:20px;
	padding:12px 20px;
	border:0px;
	background-color:#44a8ff;
	color:#fff;
	font-size:20px;
	font-weight:bold
}

 

여기까지 하면 전부 완료된 것처럼 보이겠지만 아직 하나가 더 남았습니다. 

영수증만 인쇄를 해야하는데 보시는 것처럼 화면에는 프린트하기 버튼이 남아있는 상태입니다. 

버튼을 제외하고 프린트가 되게끔 해야되는데요, 

해당 작업은 스크립트 작업이 아닌 css에서 추가 작업이 들어갑니다. 

코드는 아래와 같이 지정하면 해당 내용을 제외한 채로 인쇄가 가능하게 되죠.

 

@media print {
  #noprint { 
	display:none;
	}
}