Electron으로 custom size 인쇄하기

이번에 구현야할 리스트

1. Margin 없이
2. Silent printing

우선 2번 같은 경우에는 아래와 같은 방법을 이용하여 silent printing을 아주 쉽게 구현할 수 있다.

    const win = new BrowserWindow()
    win.webContents.print({silent: true});

 

주의 : webContents의 pageSize의 경우 올바르게 사이즈가 작동을 안하는 경우가 있으니 참고를 하고, silent true 옵션은 24.8.x 버전까지는 잘 작동하지만 그 의상의 버전에서는 이상하게 작동하니 이 역시 참고하자

 

Margin 없애기

1. MarginType

3번에서 사용한 silent:true을 사용한 오브젝트에 MarginType을 사용하면 가능해보여서 이리저리 노력을 해보았지만, 아무런 변화가 없었다. 실제로 MarginType에 대한 Electron의 Issue를 보면 작동하지 않는다는 글을 이후에 읽고나서 다른방법을 사용하기로 하였다.

2. @page

1번에 문제점을 찾으면서 @page를 사용하시면 됩니다~라는 글이 있어서 여러가지 이에 맞는 시도를 하였다. 우선 @page가 무엇인지 그리고 어디 그리고 어떻게 사용해야하는지를 알아야 했다.

 

@page

1. 어디서 사용해야할까.

@page 같은 경우 인쇄를 할 때 사용하는 css 스타일이다. electron에서 사용하는 경우에는 browserWindow에서 load된 html 혹은 링크에 css를 inject시키거나 직접 style 태그 안에 넣어서 사용하면 된다.

참조 : https://developer.mozilla.org/ko/docs/Web/CSS/@page

@page - CSS: Cascading Style Sheets | MDN

 

2. 어떻게 사용해야할까

이번 케이스는 Margin을 0으로 사용하기 때문에 단위가 필요하지는 않지만 종이의 상황에 따라서 1cm, 1inch같은 단위로 사용해서 간격을 수정할 수 있다.

이번 케이스 같은 경우에는 다음과 같은 방법으로 단위 고민 없이 쉽게 해결하였다.

@page{
	margin: 0;
}

 

새로운 문제점 # size

Margin을 해결하였더니 갑자기 인쇄되는 물체의 사진이 절반이 잘려서 프린팅이 되었다. 좌우 상하가 50% 잘려서 1/4 면적만..

이 문제를 해결하기 위해서 일단 왜 문제가 생겼는지 고민을 하였다. 우선, 갑자기 이미지가 깨지는 이유는 @page를 적용하는 순간 부터 생겼다.(margin의 수치와는 무관했다.) 즉, scale의 변환과정에서 문제가 생겼다는 것을 알 수 있어서, scale과 관련된 수치들을 조정하였으나 아무런 변화가 없었다.

해결방법

지금 문제가 생긴 이유가 css의 @page 였고, 1/4이 부분만 나오고 잘렸다는 것은 내부의 element가 외부의 element보다 작기 때문에 생긴 현상이라고 결론이 지어졌다. 그래서 body안에 있는 style을 보았더니

body{
    width:100vw;
    height:100vh;
}

언뜻 보기에는 문제가 없어보였지만, 지금은 인쇄를 하기 때문에 vw라는 단위가 문제가 있을 수 도 있다고 생각해서, 현재 인쇄하려고하는 종이 사이즈로 width와 height를 각각 변경하였다.

body{
    width: 4inch;
    height: 6inch;
}
img{
    width: 4inch;
    height: 6inch;
}

단위를 해결하고나니 문제가 해결되었다!