[javascript] window.print() 함수를 사용하여 자바스크립트로 프린트하기

14 Dec 2023

javascript

웹 페이지에서 현재 보고 있는 내용을 인쇄하려면 자바스크립트의 window.print() 함수를 사용할 수 있습니다. 이 함수는 현재 페이지의 인쇄 다이얼로그 상자를 열고, 사용자가 프린트 설정을 조정한 뒤 인쇄할 수 있도록 합니다.

페이지의 일부 내용만을 인쇄하고 싶다면, window.print() 함수를 호출하기 전에 프린트할 요소에 CSS를 추가하는 것이 좋습니다. 예를 들어, 프린트할 요소들에 @media print 미디어 쿼리를 사용하여 스타일을 지정할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
  <style>
    @media print {
      body {
        visibility: hidden;
      }
      #printContent {
        visibility: visible;
      }
    }
  </style>
</head>
<body>

<div id="printContent">
  <!-- 프린트할 내용들 -->
</div>

<script>
  function printPage() {
    window.print();
  }
</script>

<button onclick="printPage()">페이지 인쇄</button>

</body>
</html>

위의 예제에서는 @media print 미디어 쿼리를 사용하여 페이지의 프린트 시 스타일을 변경하고, 버튼을 추가하여 사용자가 원할 때 프린트 다이얼로그를 열 수 있도록 했습니다.

자바스크립트의 window.print() 함수를 사용하면 웹 페이지를 사용자가 프린트할 수 있도록 손쉽게 제공할 수 있습니다.

원하는대로 사용하실 수 있도록 도움이 되었길 바랍니다.