>  기사  >  웹 프론트엔드  >  자바스크립트 인쇄에서 머리글과 바닥글을 제거하는 방법

자바스크립트 인쇄에서 머리글과 바닥글을 제거하는 방법

PHPz
PHPz원래의
2023-04-25 10:47:063492검색

실제 응용 프로그램에서는 일부 정보나 내용을 인쇄해야 하는 경우가 많지만 인쇄할 때 시스템은 기본적으로 머리글과 바닥글을 추가하므로 종종 조판 및 레이아웃을 방해하고 많은 문제를 야기합니다. 그러면 머리글과 바닥글을 어떻게 제거할 수 있나요? 아래에서는 JavaScript를 사용하여 머리글과 바닥글을 제거하는 방법을 소개합니다.

1. 헤더 제거

페이지를 인쇄할 때 스타일 시트를 통해 헤더를 제거할 수 있습니다. 코드는 다음과 같습니다.

@media print{
  @page {
    size: auto; /* 使用打印纸张的大小,默认是auto*/
    margin: 0mm; /* 打印页面边缘设置为0 */
    mso-header: none; /* 去除页眉 */
  }
}

이 코드에서는 @media print를 사용하여 이 코드가 인쇄할 때 사용됩니다. 인쇄되는 페이지의 스타일을 설정하려면 여백을 0으로 설정합니다. 즉, 인쇄된 내용이 페이지 전체를 채울 수 있도록 가장자리가 0으로 설정됩니다. 흰색 가장자리의 시스템 기본 설정에 추가되지 않습니다. 가장 중요한 것은 mso-header:none을 사용하여 헤더를 성공적으로 제거했다는 것입니다.

2. 바닥글 제거

계속해서 바닥글 제거 방법을 살펴보겠습니다. 여기에서 스타일 시트를 조정하여 효과를 얻을 수도 있습니다. 코드는 다음과 같습니다.

@media print{
  @page {
    size: auto;
    margin: 0mm;
    mso-header: none;
    mso-footer: none; /* 去除页脚 */
  }
}

머리글을 제거하는 것과 마찬가지로 mso-footer:none을 추가하여 시스템이 바닥글을 표시하지 않도록 합니다. 브라우저마다 설정이 다르기 때문에 일부 브라우저에서는 인쇄 효과를 제어하기 위해 다른 코드를 사용해야 할 수도 있습니다.

요약

위는 JavaScript를 사용하여 인쇄된 페이지에서 머리글과 바닥글을 제거하는 방법입니다. 실제 애플리케이션에서는 페이지에 버튼을 추가하여 인쇄 이벤트를 트리거할 수 있으며 잘못된 인쇄 요청을 방지하기 위해 일부 유효성 검사 논리를 추가할 수도 있습니다. 이러한 방법을 통해 인쇄 효과를 보다 유연하게 제어하여 인쇄된 내용이 우리의 기대에 부응할 수 있습니다.

위 내용은 자바스크립트 인쇄에서 머리글과 바닥글을 제거하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.