-
div 리스트를 A4 로 출력(여러 페이지 분리)Web Programming 2023. 2. 5. 16:16728x90반응형
div 리스트를 A4 로 출력(여러 페이지 분리)하기 예시 !!
<style> div.adminContents { page-break-before: always } @media print { body, div { position: relative; } table, .SizeRatio { page-break-inside: avoid; -webkit-region-break-inside: avoid; position: relative; } } @page { size: A4 portrait; margin: 10mm 10mm 10mm 10mm; } @page :first { size: A4 portrait; margin: 0mm 10mm 0mm 10mm; } // 맨 첫장 좌우, 아랫글 바닥글 설정 </style> <body style="overflow: scroll;"> <div class="adminContents" style="width: 100%; min-width: 700px;"> <c:forEach items="${infoList}" var="list" begin="0" step="1"> <div id="box_${list.no}" style="height: 29.7cm; width: 21cm;"> // div 를 A4 사이즈로 고정 <table class="normalBoard list" id="normalBoard" style="width: 90%;"> 내용 </table> </div> <br> <br> </div> </c:forEach> </body> <div class="buttonArea02" id="button" style="margin-top: 15px;"> <button type="button" id="buttonArea02" class="button02" onclick="printArea()">출력</button> </div> function printArea(){ document.getElementById("buttonArea02").style.display = 'none'; // 프린트시 버튼은 안보이게 var initBody = document.body.innerHTML; window.onbeforeprint = function(){ document.body.innerHTML = document.getElementById('id^=box').innerHTML; // 모든 div 프린트 } window.onafterprint = function(){ document.body.innerHTML = initBody; } window.print(); } forEach 의 infoList 테이터 리스트 수만큼 A4 로 분리하여 출력728x90반응형'Web Programming' 카테고리의 다른 글
input 파일 업로드시 체크 (0) 2023.02.05 리스트 th 에 체크박스 전체 선택 및 개별 선택 (0) 2023.02.05 자바스크립트 window.close() (0) 2023.02.05 제이쿼리 '아이디'로 시작하는 값 찾기 및 array push (0) 2023.02.05 자바스크립트 array for 문 예제(eval) (0) 2023.02.05