[javascript] 자바스크립트 페이지 인쇄 (window.print)

참고: https://www.codexworld.com/print-page-area-javascript/

브라우저의 인쇄 메뉴는 웹 페이지의 콘텐츠를 인쇄하는 데 사용합니다. 이는 기본적으로 전체 페이지 콘텐츠가 선택되어 브라우저에서 인쇄됩니다. 브라우저의 인쇄 메뉴에서는 인쇄를 하기 위해 웹 페이지의 특정 섹션을 선택할 수 없습니다. 웹 페이지의 특정 영역을 인쇄하려면 클라이언트 측 또는 서버 측 코드의 도움을 받아야 합니다.

웹 애플리케이션의 인쇄 기능을 통해 오프라인에서 사용하기 위한 웹 페이지의 내용을 인쇄할 수 있습니다. 웹 페이지 콘텐츠를 인쇄할 수 있는 다양한 jQuery 플러그인도 있지만 외부 플러그인을 사용하지 않으려면 JavaScript로 이 기능을 구현할 수 있습니다. JavaScript를 사용하여 특정 영역 또는 전체 페이지 HTML 콘텐츠를 인쇄할 수 있습니다.

이 포스트에서는 JavaScript를 사용하여 특정 div 콘텐츠 또는 전체 페이지 콘텐츠를 인쇄하는 방법을 알아보겠습니다. 사용성을 높이고 프로세스를 사용자 친화적으로 만들기 위해 div 콘텐츠, 페이지 영역 및 전체 웹 페이지 콘텐츠를 인쇄하는 사용자 지정 JavaScript 기능을 만들어 보겠습니다.

자바스크립트를 사용하여 HTML 콘텐츠 인쇄

지금 만들어 볼 printPageArea() 함수에는 웹 페이지의 인쇄 기능을 쉽게 구현하기 위한 JavaScript 코드가 있습니다. 이는 웹 페이지의 특정 영역을 인쇄하는 간단한 코드가 들어있습니다.

JavaScript 코드:

printPageArea() 함수에는 전달 받은 요소의 ID를 기반으로 웹 페이지의 콘텐츠 인쇄 대화상자를 엽니다. 이 기능을 사용하여 웹 페이지의 특정 영역 또는 전체 웹 페이지를 인쇄할 수 있습니다.

function printPageArea(areaID){
    var printContent = document.getElementById(areaID).innerHTML;
    var originalContent = document.body.innerHTML;
    document.body.innerHTML = printContent;
    window.print();
    document.body.innerHTML = originalContent;
}

인쇄 버튼 요소의 onclick 이벤트에 printPageArea() 함수를 연결하고 인쇄하고자 하는 요소의 ID를 입력합니다.

printPageArea('elementID');

HTML 코드:

HTML 버튼 요소를 정의 하고 인쇄 기능을 사용하기 위해 printPageArea() 함수를 연결합니다.

<a href="javascript:void(0);" onclick="printPageArea('printableArea')">Print</a>

그 다음 인쇄하고자 하는 콘텐츠를 정의합니다.

<div id="printableArea">
    All the printable content goes here...
</div>

정리

이 포스트에서는 자바스크립트의 window.print() 메소드를 사용하여 웹 페이지의 특정 콘텐츠를 인쇄하는 방법을 알아봤습니다. 인쇄를 위해 jQuery 같은 외부 플러그인을 사용할 수도 있고 직접 인쇄 함수를 작성할 수도 있습니다.

관련 글

자바스크립트 getElementById() 사용 방법