Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

JavaScript window.print() 함수로 웹페이지 인쇄하는 방법

웹페이지를 인쇄해야 하는 상황이라면 JavaScript의 window.print() 메서드를 활용하면 됩니다. 이 메서드를 호출하면 브라우저의 표준 인쇄 대화상자가 열리며, 사용자는 이 대화상자에서 프린터 선택, 용지 크기, 인쇄 범위 등 다양한 인쇄 옵션을 손쉽게 설정할 수 있습니다.

window.print() 기본 사용법

window.print()는 별도의 매개변수 없이 호출만 하면 현재 페이지 전체를 인쇄할 수 있는 가장 간단한 방법입니다. 버튼 클릭과 같은 사용자 이벤트와 함께 사용하면 더욱 편리합니다.

예제 코드

아래 코드를 실행하고 '인쇄하기' 버튼을 클릭하면 인쇄 대화상자가 나타나는 것을 직접 확인할 수 있습니다.

<!DOCTYPE html>
<html>
   <body>
      <button onclick="display()">인쇄하기</button>
      <script>
         function display() {
            window.print();
         }
      </script>
   </body>
</html>

동작 원리

버튼을 클릭하면 display() 함수가 실행되고, 함수 내부의 window.print()가 호출되어 브라우저의 인쇄 대화상자가 화면에 나타납니다. 이후 사용자는 원하는 프린터를 선택하고 인쇄 옵션을 조정한 뒤 출력을 진행하면 됩니다.

참고 사항

모든 주요 브라우저(Chrome, Firefox, Safari, Edge 등)에서 window.print()를 지원하므로 별도의 라이브러리 없이 바로 사용할 수 있습니다. 또한 CSS의 @media print 규칙을 함께 활용하면 화면에는 보이지 않지만 인쇄 시에만 적용되는 스타일을 지정하여, 불필요한 요소를 제거한 깔끔한 인쇄 결과물을 만들 수 있습니다.