2013. 11. 1.

자바스크립트 크롬 Chrome과 익스플로러 Explorer에서 인쇄 미리보기 창 띄우기.

크롬에서 인쇄를 하려고 하면 기본으로 미리보기 화면이 나오게 됩니다. 허나 익스플로러에서는 시스템 대화상자를 통한 무심한 창이 팝업 되죠. 크롬과 마찬가지로 익스플로러에서도 인쇄 미리보기가 존재 합니다.
<script type="text/javascript">
    window.print();
</script>
크롬에서는 인쇄 페이지 기본이 미리보기니까 걱정 없고, 익스플로러를 생각해 봅시다.
아래의 자바스크립트 소스로 익스플로러에서 인쇄 미리보기를 팝업 할 수 있습니다.
<script type="text/javascript">
function preview_print(){
   var OLECMDID = 7;
   var PROMPT = 1;
   var WebBrowser = '<OBJECT ID="WebBrowser1" WIDTH=0 HEIGHT=0 CLASSID="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"></OBJECT>';
   document.body.insertAdjacentHTML('beforeEnd', WebBrowser);
   WebBrowser1.ExecWB( OLECMDID, PROMPT);
}
</script>
다소 괴상해 보이긴 합니다.
insertAdjacentHTML()과 ExecWB()는 아래 링크를 참조.
http://msdn.microsoft.com/en-us/library/ie/ms536452(v=vs.85).aspx
http://msdn.microsoft.com/en-us/library/aa752087.aspx

insertAdjacentHTML() 함수는 특정 엘리먼트에 HTML 소스를 집어 넣어 주는 녀석 입니다. 첫번쨰 파라미터에서는 삽입 될 위치를 지정해 주는데 4가지가 있습니다.

<!-- beforebegin --> <p> <!-- afterbegin --> foo <!-- beforeend --> </p> <!-- afterend --> 

시작태그앞, 시작태그뒤, 종료태그앞, 종료태그뒤를 나타내네요.

대게 인쇄 페이지가 팝업으로 뜨고, 자동으로 인쇄 미리 보기 페이지가 나타나게끔 많이 합니다. 크롬은 자체적으로 현재 페이지에서 레이어 같은 걸로 처리 해놨던데... 익스플로러에선 대부분 인쇄하기 위해서 별도의 창을 마련 하더군요.

해당 함수가 있어야 하는 위치가 있습니다.
insertAdjacentHTML() 함수는 페이지 로딩중에는 쓸 수 없다고 합니다. 따라서 우리는 onload 이벤트에서 실행이 되도록 해야 합니다.
<script type="text/javascript">
window.onload = function(){
    preview_print(); //익스플로러
    window.print(); //크롬
};
</script>
저렇게 내버려 둘순 없으니, 브라우저에 맞게 함수를 실행 시켜야 겠네요.
navigator는 브라우저의 정보를 담고 있는 객체로, 이 녀석의 값을 참조해서 구분해 내면 됩니다.
http://www.w3schools.com/jsref/obj_navigator.asp
<script type="text/javascript">
window.onload = function(){
    if( navigator.userAgent.indexOf("MSIE") > 0 ){
        preview_print();
    } else if( navigator.userAgent.indexOf("Chrome") > 0){
        window.print();
    }
};
</script>
이렇게 하면 완성. 헌데 익스플로러 상단의 노란 상태바가 나타나면서 경고 메세지를 보여 주네요. 도구 - 인터넷 옵션 - 보안 - 신뢰할 수 있는 사이트에 해당 사이트를 추가 해주면 더이상 뜨지 않네요.

자동으로 미리보기를 띄우기 위해 스크립트를 사용해서 이런거고, 사용자가 직접 익스플로러 웹페이지에서 마우스 우클릭으로 인쇄 미리보기를 하면 뜨지 않습니다.

경고 문이 뜨면 신뢰할 수 있는 사이트에 추가 하라고 메세지라도 띠워줘야되려나...

댓글 없음 :

댓글 쓰기