[자바스크립트,js] 화면 그대로 window.print() 하기 프로그래밍

프로젝트중 버튼을 누르면 해당페이지를 print 하게 해야됐다.

그래서 무심결에 window.print()로 구현했는데

이상하게 이빨이 안맞는 것이다.

html css 보이는 그대로 출력하려 했으나 print 미리보기에서는 

화면이 틀어져서 나온다... 

구글링 열심히 하다가 해결책이 나와서 포스팅.

 

<script>
            var g_oBeforeBody = document.getElementById('캡쳐할 id').innerHTML;

            jQuery('.print_btn').click( function() {

                // 프린트를 보이는 그대로 나오기위한 셋팅
                window.onbeforeprint = function (ev) {
                    document.body.innerHTML = g_oBeforeBody;
                };

                // window.onafterprint 로 다시 화면원복을 해주는게 맞으나,
                // 문제가 있기에 reload로 처리
/*
                var initBody = document.body.innerHTML;
                window.onafterprint = function(){
                    document.body.innerHTML = initBody;
                }
*/

                window.print();
                location.reload();

                // reload를 해주는 이유는 onbeforeprint 이벤트로
                // 화면을 다시 그렸기때문에 스크립트나 여러가지 이벤트가 해지되는 현상이 있음
                // 그래서 임시조치로 reload를 해줌
            });
</script>

 

Tag :

Leave Comments