[javascript] 자바스크립트를 사용하여 프린트 시에 웹 페이지의 특정 부분을 그리드 형식으로 출력하는 방법

14 Dec 2023

javascript

웹 페이지에서 특정 부분을 그리드 형식으로 출력하려면 자바스크립트를 사용하여 그 부분을 캡처하고 이를 인쇄할 수 있도록 설정해야 합니다. 아래는 웹 페이지의 특정 부분을 그리드 형식으로 출력하기 위한 자바스크립트 코드의 예시입니다.

// 그리드 형식으로 인쇄할 요소 선택
const elementToPrint = document.getElementById('gridContainer');

// 인쇄할 내용을 담을 새로운 창 생성
const newWindow = window.open('', '', 'height=500,width=500');

// 새로운 창에 그리드 형식의 내용 삽입
newWindow.document.write('<html><head><title>그리드 출력</title>');
newWindow.document.write('</head><body >');
newWindow.document.write(elementToPrint.innerHTML);
newWindow.document.write('</body></html>');

// 새로운 창에서 인쇄
newWindow.document.close();
newWindow.print();

위의 코드는 웹 페이지에서 id가 gridContainer인 요소를 그리드 형식으로 출력하는 예시입니다. 웹 페이지에서 특정한 그리드 형식의 내용을 출력하고자 한다면, 해당 내용의 id 나 class 등에 따라 적절히 수정하여 사용하시면 됩니다.

이와 관련하여 자세한 정보는 MDN web docs에서 확인하실 수 있습니다.

위의 예시 코드를 참고하여 프로젝트에 맞게 적절히 수정하여 사용하시면 됩니다.