많은 개발자가 웹 페이지에서 인쇄 경험을 향상시키려고 합니다. . 그러나 머리글, 바닥글 및 여백과 같은 기본 브라우저 인쇄 설정이 원하는 프레젠테이션을 방해하면 좌절감이 발생합니다. CSS나 JavaScript를 통해 이러한 설정을 사용자 정의할 수 있는 솔루션이 있습니까?
CSS 사양은 @page 지시문을 제공하여 개발자가 인쇄된 문서에 대한 서식 옵션을 정의합니다. @page를 사용하면 페이지 크기, 방향, 여백을 지정할 수 있습니다.
<br>@page {<br> size: auto;<br> margin: 0mm;<br> }<br>
여백을 0mm로 설정하면 브라우저의 기본 여백. 그러나 이 접근 방식에는 제한 사항이 있습니다.
안타깝게도 @page와 관련된 브라우저 동작은 크게 다릅니다. Chrome 및 Firefox와 같은 최신 브라우저는 @page를 지원하지만 Firefox 3.6 및 Internet Explorer 7과 같은 이전 버전은 지원하지 않습니다. 또한 Safari에는 프린터 페이지 여백 설정에 대한 지원이 여전히 부족합니다.
지원되는 브라우저에서도 결과가 이상적이지 않을 수 있습니다. 예를 들어 Internet Explorer에서 여백을 0mm로 설정하면 머리글/바닥글이 숨겨지는 것이 아니라 브라우저의 투명하지 않은 머리글/바닥글이 오버레이되어 페이지 콘텐츠가 올바르게 배치됩니다.
Firefox에서는 @ 페이지 여백 설정은 유지되지만 브라우저 머리글/바닥글과 페이지 콘텐츠가 모두 표시되므로 브라우저 컨트롤과 콘텐츠가 혼합됩니다.
Opera는 다음과 유사하게 작동합니다. 기본 여백이 아닌 여백으로 인해 헤더가 페이지 콘텐츠와 부분적으로 겹치는 Firefox.
Chrome은 이 시나리오에 가장 적합한 동작입니다. Chrome은 머리글/바닥글 위치와 충돌할 만큼 @page 여백을 작게 설정하여 이를 효과적으로 숨깁니다.
이 접근 방식은 인쇄되는 특정 페이지의 여백에만 영향을 미친다는 점에 유의하는 것이 중요합니다. 브라우저의 전반적인 인쇄 설정에는 영향을 미치지 않습니다.
웹페이지에서 인쇄하는 동안 머리글, 바닥글 및 여백을 비활성화하면 브라우저 불일치로 인해 문제가 발생합니다. CSS의 @page 지시문은 일부 사용자 정의 옵션을 제공하지만 그 효과는 브라우저에 따라 다릅니다. Chrome은 현재 페이지 여백이 해당 위치와 충돌하도록 허용하여 머리글과 바닥글을 숨기는 최상의 솔루션을 제공합니다. 그러나 브라우저 업데이트 및 향후 개발로 인해 이 동작이 변경될 수 있습니다.
위 내용은 머리글, 바닥글 및 여백을 비활성화하기 위해 내 웹 페이지의 인쇄 옵션을 사용자 정의할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
