웹에서 인쇄 기능을 구현하는 것은 간단하다. window객체에서 제공하는 print함수를 이용하면
DOM에 있는 내용을 그대로 가지고 인쇄 할 수 있다.
설명
window 객체에서 제공하는 print함수는 별개의 파라메터를 받지 않고,
현재 문서를 인쇄해주는 기능을 제공하는 함수이다.
즉, 사용자가 원하는 특정영역을 인쇄하기 위해서는 DOM을 조작 할 필요가 있다.
그러기 위해 자주 사용하는 방법은 아래와 같다.
1. print가 되기전에 document.body에 사용자가 원하는 영역의 element를 저장해준다.
2. print를 수행한다.
3. print가 수행되고 난후, document.body에 기존에 있던 element를 다시 저장해준다.
여기서 1번을 수행하지 않으면 특정영역이 아닌 문서의 전체 화면이 인쇄될 것이고
3번을 수행하지 않으면 사용자가 DOM에 저장한 특정영역이 전체화면이 될 것이다.
print가 되기전과 되고난 후의 시점을 잡는 함수 또한 window 객체에서 제공한다.
각 함수에 대해서 간단히 알고 가자.
window.print : 현재 문서를 인쇄할 수 있는 인쇄 대화 상자을 열어준다.
window.onbeforeprint : 인쇄 이벤트가 시작되기전에 시점을 잡아준다.
window.onafterprint : 인쇄 이벤트가 완료 된 시점을 잡아준다.
샘플코드
샘플코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>
<script>
const showPrint = () => {
//인쇄 할 영역 작성 : 나는 id가 print-content인 엘리먼트의 내부에 있는 HTML영역을 잡음
const print_content = document.querySelector('#print-content').innerHTML
const origin_content = document.querySelector('#modalSheet')
/**
* window.onbeforeprint : print 되기전에 수행되는 함수
* print 되기전에 인쇄하고자 하는 영역(엘리먼트)의 값을
* document.body에 담아준다
*/
window.onbeforeprint = function () {
document.body = print_content;
};
//print 수행
window.print();
/**
* window.onafterprint : print 되고난 후에 수행되는 함수
* print 되고난 후 기존 영역을 document.body에 담아준다
*/
window.onafterprint = function () {
document.body = origin_content;
};
return true;
}
</script>
<body>
<div class="modal modal-sheet position-static d-block bg-secondary py-5" tabindex="-1" role="dialog" id="modalSheet">
<div class="modal-dialog" role="document">
<div id="print-content" class="modal-content rounded-6 shadow">
<div class="modal-header border-bottom-0">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body py-0">
<p>This is a modal sheet, a variation of the modal that docs itself to the bottom of the viewport like the newer share sheets in iOS.</p>
</div>
<div class="modal-footer flex-column border-top-0">
<button type="button" class="btn btn-lg btn-primary w-100 mx-0 mb-2" onclick="showPrint()">인쇄 미리보기</button>
<button type="button" class="btn btn-lg btn-light w-100 mx-0" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
결과화면
이번에 인쇄 기능을 구현 할 일이 있어서 처음에 이 방법을 사용해보았는데, 이 방법으로는 잘 되지 않아서
나는 다른방법을 사용했다. 하지만 일반적인 HTML이라면 이걸로 충분하다.
'FrontEnd > JavaScript' 카테고리의 다른 글
| [JS] html2canvas + jspdf 조합으로 HTML에서 원하는 영역을 PDF로 변환해보자. (0) | 2023.11.13 |
|---|---|
| [JS] Vue 컴포넌트의 내용을 인쇄하는 기능을 구현하며 생겼던 문제와 원인에 대한 정리 (0) | 2023.11.11 |
| [JS] 자바스크립트의 콜백(Callback)함수에 대한 개념 및 샘플코드를 통해 이해해보자. (1) | 2023.05.21 |
| [JS] Promise.all를 통해 여러개의 프라미스를 병렬로 실행하고 모든 프라미스가 종료되는 시점을 잡아보자. (1) | 2023.05.20 |
| [JS] 웹API : structuredClone함수를 통한 깊은 참조 복사 하는 방법 (0) | 2022.12.23 |
