[html2canvas] 기본 예제

etc

[html2canvas] 기본 예제

멍목 2023. 4. 15. 14:32

html2canvas : 특정 영역을 캡쳐해주는 오픈소스 라이브러리

JSP 단

<!-- html2canvas : 캡처 및 이미지 저장 라이브러리 -->
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

...

<script>
function do(){
    $(window).scrollTop(0); //화면을 맨위로 이동(scrollTop안할 시 보이는 화면만 저장되고 위는 짤림)
    // divTest 이라는 div를 영역으로 화면 캡쳐
    html2canvas($("#divTest")[0]).then((canvas) => {
        var myImage = canvas.toDataURL("image/png");

        var nWindow = window.open('');
        nWindow.document.body.appendChild(canvas);
        nWindow.focus();

        // print the window
        nWindow.print();

        // reload the page
        location.reload();
    });
}
<script>

...

<body>
	<div id="divTest">
		<button onclick="javascript:do()">인쇄</button>
	</div>
</body>
...