웹페이지 인쇄 시 배경색/이미지 출력안될 때

가끔 웹페이지를 인쇄하고 싶은데 인쇄 미리보기 창에서부터 배경색이나 이미지가 출력되지 않을 때가 있다.

css의 background 속성을 사용하면 그런 듯 하다.

예를들어 본인 블로그의 메인화면이다.

인쇄미리보기를 보면 버튼 몇 개가 없어졌다.

이런식으로 background 속성으로 url을 지정해준 건 안보인다.

이런식으로 img 태그에 src 를 지정해주면 썸네일 잘 나온다.

인쇄 시 이미지나 버튼이 잘 나오게 하려면 퍼블리싱할 때에 아싸리 img 태그를 사용하거나, 인쇄 시 alert 를 노출해 인쇄하려는 사람이 대처할 수 있도록 해주어야 하는데, 어떠한 액션을 취해야 이미지가 제대로 나올까?

본인이 구글링해본 결과로는 아래와 같이 액션을 취해주어야 한다.

1) IE / 파이어폭스

Alt 누른 후 떼기 -> 파일 메뉴 -> 페이지 설정 -> 용지 옵션 -> 옵션들 중 배경색 및 이미지 인쇄 체크

2) 크롬 / 마소 엣지

인쇄 -> 설정 더보기 -> 옵션들 중 배경 그래픽 체크

3) 사파리 (해결되지 않는 경우도 있다고 함)

Preferences -> Advanced > Proxies: Change Settings > Advanced > Printing > "Print background colors and images"

그럼 짜잔~ 안보이던 아이콘들이 잘 보인다.

본인같은 경우에는 아래처럼 코딩해놓았다. 다만 beforeprint 이벤트는 아래 사양에서만 지원된다.

<script>
	window.addEventListener("beforeprint", function(){
    	alert("※ 주의 사항" +
		"\n인쇄하실 때 배경색 혹은 이미지가 나오지 않을 때 아래와 같이 설정해주세요." +
		"\nIE(인터넷 익스플로러) / FireFox(파이어폭스) 의 경우" +
		"\n - Alt 누른 후 떼기 > 파일 > 페이지 설정 > 용지 옵션 > 배경색 및 이미지 인쇄 체크" +
		"\nChrome(크롬) / MicroSoft Edge(마이크로소프트 엣지) 의 경우" +
		"\n - 인쇄 미리보기 화면 > 설정 더보기 > 옵션 > 배경 그래픽 체크" +
		"\nSafari(사파리) 의 경우" +
		"\n - Preferences > Advanced > Proxies: Change Settings > Advanced > Printing > Print background colours and images 체크" +
		"\n* 해결불가 시 문의부탁드립니다.");
    });
</script>