웹 페이지에서 인쇄 기능을 구현하고 싶다면 JavaScript의 print() 메서드를 사용하면 됩니다. 이 메서드를 호출하면 브라우저의 인쇄 대화상자가 자동으로 팝업되며, 사용자는 이 대화상자에서 어떤 프린터를 선택할지, 인쇄 옵션은 어떻게 설정할지 등을 손쉽게 지정할 수 있습니다.
인쇄 대화상자란?
인쇄 대화상자는 아래와 같은 형태로 나타납니다.
window.print() 기본 사용법
window.print()는 별도의 설정 없이 즉시 호출할 수 있는 내장 메서드입니다. 버튼 클릭 시 인쇄 대화상자를 띄우는 가장 간단한 예제를 살펴보겠습니다.
예제 코드
<!DOCTYPE html>
<html>
<body>
<button onclick="display()">클릭하여 인쇄</button>
<script>
function display() {
window.print();
}
</script>
</body>
</html>코드 설명
위 코드의 동작 방식은 다음과 같습니다.
- <button>: 화면에 '클릭하여 인쇄' 버튼을 생성합니다.
- onclick="display()": 버튼이 클릭되면
display()함수가 실행됩니다. - window.print(): 함수 내부에서 현재 페이지 전체에 대한 인쇄 대화상자를 호출합니다.
활용 팁
실무에서는 다음과 같은 방식으로 인쇄 기능을 더욱 유용하게 활용할 수 있습니다.
- @media print CSS 활용: 인쇄 시 불필요한 요소(버튼, 광고 등)를 숨기고 본문만 출력되도록 스타일을 조정할 수 있습니다.
- 특정 영역만 인쇄: 새 창이나 iframe을 활용해 원하는 부분만 인쇄하도록 구현할 수 있습니다.
- 페이지 로드 후 자동 인쇄: 영수증이나 쿠폰 페이지처럼 접속 즉시 인쇄 대화상자를 띄워야 하는 경우
onload이벤트와 함께 사용할 수 있습니다.
마무리
JavaScript로 인쇄 대화상자를 띄우는 것은 window.print() 한 줄이면 충분합니다. 위 예제 코드를 그대로 복사해 HTML 파일에 붙여넣고 실행하면 바로 결과를 확인할 수 있으니, 직접 테스트해 보시기 바랍니다.