js 현재 화면 프린트할 때

프린트 하고 싶다!

= window.print()

 

프린트 미리보기 화면이 닫히는 시점

= onafterprint

 

적용하고자 했던 예시

- 팝업 화면을 프린트할 때 미리보기가 너무 작아서 보이지 않는 문제가 있었음.

 

그래서 생각한 방법

1. 현재 창의 가로, 세로를 저장

2.현재 창을 최대화

3. window.print()

4. 원래의 크기로 돌아가기.

 

chatGPT가 알려줌

// 1. 현재 창의 크기를 저장합니다.
var originalWidth = window.innerWidth;
var originalHeight = window.innerHeight;

// 2. 현재 창을 최대화합니다.
window.resizeTo(screen.availWidth, screen.availHeight);

// 3. window.print() 실행합니다.
window.print();

// 4. 프린트 대화상자가 닫힌 후에 원래 크기로 돌아갑니다.
window.onafterprint = function() {
    // 원래의 크기로 돌아갑니다.
    window.resizeTo(originalWidth, originalHeight);
};

 

실제론 이렇게 함

// 프린트 이후 원래 창의 크기로 돌리기 위해 변수로 저장
var originalWidth = window.outerWidth;
var originalHeight = window.outerHeight;

window.onbeforeprint = function() {
    // 미리보기에서 잘 보일 수 있도록 현재 창을 최대화
    window.resizeTo(screen.availWidth, screen.availHeight);
}

window.onafterprint = function() {
    // 원래의 팝업 사이즈로 변경
    window.resizeTo(originalWidth, originalHeight);

    var screenWidth = screen.availWidth;
    var screenHeight = screen.availHeight;

    var leftPosition = (screenWidth - originalWidth) / 2;
    var topPosition = (screenHeight - originalHeight) / 2;

    // 화면의 중앙으로 위치 변경
    window.moveTo(leftPosition, topPosition);
}