> 웹 프론트엔드 > CSS 튜토리얼 > HTML에서 페이지 번호를 인쇄할 수 없는 이유와 해결 방법은 무엇입니까?

HTML에서 페이지 번호를 인쇄할 수 없는 이유와 해결 방법은 무엇입니까?

Susan Sarandon
풀어 주다: 2024-12-14 14:47:11
원래의
666명이 탐색했습니다.

Why Can't I Print Page Numbers in HTML and What's the Workaround?

HTML 페이지에서 페이지 번호를 인쇄할 수 없습니까?

문제 설명:

광범위하게 조사했는데도 페이지 번호가 인쇄되지 않습니다. HTML 문서를 인쇄할 때 나타납니다.

CSS 코드 사용됨:

@page {
  margin: 10%;
  @top-center {
    font-family: sans-serif;
    font-weight: bold;
    font-size: 2em;
    content: counter(page);
  }
}
로그인 후 복사

@page 규칙이 @media all 블록 내부와 외부 모두에서 시도되었으나 소용이 없었습니다.

해결책:

웹 브라우저의 한계로 인해 @page를 사용한 페이지 번호 구현은 불가능합니다. Oliver Kohll은 CSS에 의존하지 않고 테이블 기반 서식을 활용하는 대체 솔루션을 제공합니다. @page:

CSS:

#content {
    display: table;
}

#pageFooter {
    display: table-footer-group;
}

#pageFooter:after {
    counter-increment: page;
    content: counter(page);
}
로그인 후 복사

HTML:

<div>
로그인 후 복사

맞춤 설정:

페이지 번호의 모양을 사용자 정의할 수 있습니다. 텍스트 서식, 위치 지정, 배경 스타일 지정 등 #pageFooter 속성 수정

위 내용은 HTML에서 페이지 번호를 인쇄할 수 없는 이유와 해결 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿