JavaScript로 웹페이지 인쇄하기: print() 메서드 활용법

JavaScript 페이지 인쇄의 기본 원리

JavaScript에서 현재 페이지를 인쇄하려면 print() 메서드를 사용하면 됩니다. 이 메서드를 호출하면 브라우저의 표준 인쇄 대화상자가 자동으로 열리며, 사용자는 이 대화상자에서 어떤 프린터를 선택할지, 인쇄 범위와 매수는 어떻게 할지 등 다양한 인쇄 옵션을 손쉽게 설정할 수 있습니다.

print() 메서드는 별도의 라이브러리나 플러그인 없이 모든 주요 브라우저(Chrome, Firefox, Safari, Edge 등)에서 기본적으로 지원되기 때문에, 웹페이지에 인쇄 기능을 추가하는 가장 간단하고 확실한 방법입니다.

동작 예시

아래는 실제로 print() 메서드가 호출되었을 때 나타나는 인쇄 대화상자의 모습입니다.

JavaScript로 웹페이지 인쇄하기: print() 메서드 활용법

예제 코드

버튼을 클릭하면 인쇄 대화상자가 열리도록 구현한 코드입니다. 아래 예제를 직접 실행해 보면서 페이지 인쇄 기능이 어떻게 동작하는지 확인해 보세요.

<!DOCTYPE html>
<html>
   <body>
      <button onclick="display()">Click to Print</button>
      <script>
         function display() {
            window.print();
         }
      </script>
   </body>
</html>

코드 설명

<button> 요소에 onclick 이벤트를 연결하여 클릭 시 display() 함수가 실행되도록 합니다.
display() 함수 내부의 window.print()가 호출되면 현재 페이지 전체를 인쇄하는 대화상자가 열립니다.
print() 메서드는 window 객체에 포함되어 있으므로, 그냥 print()라고만 작성해도 동일하게 동작합니다.

추가 팁: 인쇄 스타일 최적화

인쇄 결과물을 더 깔끔하게 만들고 싶다면 CSS의 @media print 규칙을 함께 활용해 보세요. 화면에는 보이지만 인쇄 시에는 불필요한 광고, 메뉴, 버튼 등을 숨길 수 있습니다.

@media print {
  .no-print {
    display: none;
  }
}

이처럼 window.print() 메서드와 @media print 스타일을 조합하면, 사용자에게 최적화된 인쇄 경험을 제공하는 웹페이지를 쉽게 만들 수 있습니다.