웹페이지 작업을 하다 보면, 출력 버튼이 있고
출력 버튼 클릭시, 특정 영역의 데이터만 프리트 해야 하는 경우가 있다.
이럴 경우에는 아래 2가지 방법을 활용하면 된다.
특정 div를 출력할때는 divPrint(), 특정 iframe 내용을 출력할때는 iframePrint3()
아이프레임 프린트하기/아이프레임출력/특정영역출력/프린트함수/아이프레임프린트
<html>
<body>
<script>
function divPrint() {
var inbody = document.body.innerHTML; // 이전 body 영역 저장
window.onbeforeprint = function () { // 프린트 화면 호출 전 발생하는 이벤트
document.body.innerHTML = document.getElementById('targetDiv').innerHTML; // 원하는 영역 지정
}
window.onafterprint = function () { // 프린트 출력 후 발생하는 이벤트
document.body.innerHTML = inbody; // 이전 body 영역으로 복구
}
window.print();
}
function framePrint3() {
window.frames["frmTest"].focus();
window.frames["frmTest"].print();
}
</script>
<a href="#" onclick="javascript:divPrint();">특정div출력</a><br />
<a href="#" onclick="javascript:framePrint3();">아이프레임내용출력</a><br />
<h1>div 영역</h1>
<DIV ID="targetDiv" STYLE="BORDER:1PX SOLID RED; WIDTH:500PX; HEIGHT:100PX;FLOAT:LEFT;">
DIV내용
</DIV>
<div id="" style="height:500px; display:block;">
<h1>아이프레임 영역</h1>
<iframe src="printinner.asp" id="frmTest" name="frmTest"
style="width:500px; height:500px; border:1px solid red;float:left; ">
</div>
</body>
</html>'웹프로그래밍 > JAVASCRIPT' 카테고리의 다른 글
| 카카오맵/카카오맵API사용법/카카오맵 위치 표시/KAKAO MAP API/카카오맵API사용하기/카카오맵 주소 좌표/카카오맵 주소를 좌표로 변환 (1) | 2020.08.09 |
|---|---|
| JAVASCRIPT 링크복사/ JAVASCRIPT주소복사 /링크공유 (0) | 2020.08.04 |
| Javascript <-> Asp 간 JSON 통신 (0) | 2015.08.21 |