티스토리 뷰

프로그래밍/Front (HTML, CSS, JS)

[JavaScript] 원하는 모양으로 인쇄하기

꼬렙 2012. 2. 1. 11:25
728x90

ㅇ 단순히 화면에 보여지는 그대로 인쇄

<script type="text/javascript">
    window.print();
</script>


ㅇ innerHTML 이용

<html>
<head>
<script type="text/javascript">
var fnPrint = function() {
document.body.innerHTML = selectArea.innerHTML;
window.print();
};
</script>
</head>
<body>
        <!-- 제외될 영역--> 
프린트<input type="button" value="확인" onClick="fnPrint()" /> 

        <!-- 인쇄될 영역--> 
<ul id="selectArea">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</body>
</html>


ㅇ opener 이용해서 문서를 재구성한 다음에 출력

<html>
<head>
<script type="text/javascript">
var fnPrint = function() {
var strFeature = "";
strFeature += "width=200, height=200, all=no";

var objWin = window.open('', 'print', strFeature);
objWin.document.write("<table width='100' border='1'>");
objWin.document.write("<tr>");
objWin.document.write("<td>");
objWin.document.write(selectA.value);
objWin.document.write("</td>");
objWin.document.write("<td>");
objWin.document.write(selectB.value);
objWin.document.write("</td>");
objWin.document.write("<td>");
objWin.document.write(selectC.value);
objWin.document.write("</td>");
objWin.document.write("<td>");
objWin.document.write(selectD.value);
objWin.document.write("</td>");
objWin.document.write("</tr>");
objWin.document.write("</table>");
objWin.document.close();

objWin.print();
objWin.close();
};
</script>
</head>
<body>
프린트<input type="button" value="확인" onClick="fnPrint()" />
<ul id="selectArea">
<li><input type="text" id="selectA" value="A" /></li>
<li><input type="text" id="selectB" value="B" /></li>
<li><input type="text" id="selectC" value="C" /></li>
<li><input type="text" id="selectD" value="D" /></li>
</ul>
</body>
</html>


다른 페이지를 열어 그 안에서 스크립트로 제어할 수도 있지만 간단히 이런식으로도 사용이 가능하다









'프로그래밍 > Front (HTML, CSS, JS)' 카테고리의 다른 글

[JavaScript] replaceAll 구현  (0) 2012.02.01
[JavaScript] 배열에 값이 있는지 검사  (0) 2012.02.01
[JavaScript] 숫자 체크 (isNaN)  (2) 2012.01.18
[jQuery] 셀렉터 및 함수 정리  (6) 2012.01.12
[JavaScript] arguments(전달된 인자)  (3) 2012.01.10