[Javascript] IE11/Chrome 자바스크립트 인쇄

자바스크립트 인쇄는 간단하게 window.print(); 명령어를 사용하면 된다.

문제는 아이프레임이 있는 페이지의 경우다.

1. 여러 개의 아이프레임 인쇄

여러 개의 아이프레임은 한 번에 인쇄할 수 없다고 본다.

여러 개의 아이프레임을 한 번에 인쇄하고 싶다면 빈 아이프레임을 하나 만들고 innerHTML 명령어를 이용해 그 안에 모든 엘리먼트를 다 집어넣어서 인쇄하는 방법이 있다.

2. 특정 아이프레임 인쇄

특정 아이프레임을 인쇄하고 싶은 경우 아이프레임 안의 해당 페이지에 print 함수를 만들어놓는 편이 좋다.

예를 들면 아래와 같은 함수를 인쇄할 대상 페이지에 넣는다.

function doPrintPage() {

window.print();

}

그러면 아이프레임의 바깥에서 print 명령을 수행하기 쉬워진다.

예를 들어 아이프레임이 <iframe id=”targetFrame” name=”targetFrame”> 과 같다면, window.targetFrame.doPrintPage(); 명령어로 인쇄를 실행하면 된다.

3. IE11/Chrome 에서 아이프레임 인쇄

크롬(Chrome)에서는 이전 항목에서 밝혔듯 window.targetFrame.doPrintPage(); 명령어만 사용하면 인쇄가 실행된다.

반면 IE11은 아이프레임에 먼저 focus를 주고 print 명령어를 실행해야 인쇄가 정상적으로 수행된다.

크롬은 포커스와 상관없이 print 함수가 실행되는 프레임 내용이 인쇄되지만, IE11은 현재 포커스되어 있는 프레임 내용이 인쇄되기 때문이다.

하지만 굳이 코드를 분기할 필요는 없다. 결론은 IE11이든 크롬이든 아래처럼 쓰면 된다.

window.targetFrame.focus(); // for IE11

window.targetFrame.doPrintPage();