Javascript
영역 캡쳐하고 프린트 하기
- 2025.03.04 14:53:54
|
<!-- 인쇄시 캡쳐 js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script> <script> $(document).ready(function(){ // 인쇄 버튼 클릭 이벤트 $(document).on('click', '#printBtn', function(e){ e.preventDefault(); // 캡쳐 영역 const captureArea = $('#printArea')[0]; // 영역 캡쳐 html2canvas(captureArea, { backgroundColor: 'white', scale: 2 }) .then(function (canvas) { const printWindow = window.open('', '_blank'); const imgData = canvas.toDataURL('image/png'); printWindow.document.write(`<html> <body> <img src='${imgData}' alt="캡쳐 이미지" style="width: 100%; display: block;"/> </body> </html>`); // 인쇄 실행 const images = printWindow.document.querySelectorAll('img'); let loadedCount = 0; //아미지 로드 체크 후 프린트 실행 images.forEach((img) => { img.onload = function () { loadedCount++; if (loadedCount === images.length) { setTimeout(() => { printWindow.focus(); printWindow.print(); printWindow.close(); }, 500); } }; img.onerror = function () { console.error('이미지 로드 실패:', img.src); }; }); }); }); }); </script> |