[css] HTML을 사용하여 문서의 모든 인쇄 페이지에 머리글과 바닥 글을 인쇄하는 방법은 무엇입니까?

Program / 글쓴이

인쇄 된 각 페이지에 사용자 정의 머리글과 바닥 글이있는 HTML 페이지를 인쇄 할 수 있습니까?

내용에 관계없이 모든 인쇄 된 페이지 의 상단과 하단에 크기가 16pt 인 빨간색, Arial의 “미분류”라는 단어를 추가하고 싶습니다 .

명확히하기 위해 문서가 5 페이지에 인쇄 된 경우 각 페이지에는 사용자 정의 머리글과 바닥 글이 있어야합니다.

HTML / CSS를 사용하여 이것이 가능한지 아는 사람이 있습니까?

답변

바닥 글이 될 요소를 가져 와서 position : fixed and bottom : 0으로 설정하면 페이지가 인쇄 될 때 인쇄 된 각 페이지의 맨 아래에서 해당 요소가 반복됩니다. 헤더 요소에 대해서도 마찬가지입니다. 대신 top : 0을 설정하십시오.

예를 들면 다음과 같습니다.

<div class="divFooter">UNCLASSIFIED</div>

CSS :

@media screen {
  div.divFooter {
    display: none;
  }
}
@media print {
  div.divFooter {
    position: fixed;
    bottom: 0;
  }
}

답변

정답은 HTML 5 및 CSS3이 print미디어 에서 페이지 머리글 및 바닥 글 인쇄를 지원하지 않는다는 것 입니다.

그리고 당신은 그것을 사용하여 그것을 시뮬레이션 할 수 있습니다 :

  • 테이블
  • 고정 위치 블록

그들 각각은 이상적인 일반적인 솔루션이되는 것을 막는 버그를 가지고 있습니다.

답변

나는 방금 내 하루 중 더 나은 시간을 실제로 나를 위해 일한 해결책을 생각해 내고 내가 한 일을 공유 할 것이라고 생각했습니다. 위의 솔루션에 대한 문제는 모든 단락 요소가 페이지 하단에서 원하는 바닥 글과 겹칠 수 있다는 것입니다. 이 문제를 해결하기 위해 다음 CSS를 사용했습니다.

footer {
  font-size: 9px;
  color: #f00;
  text-align: center;
}

@page {
  size: A4;
  margin: 11mm 17mm 17mm 17mm;
}

@media print {
  footer {
    position: fixed;
    bottom: 0;
  }

  .content-block, p {
    page-break-inside: avoid;
  }

  html, body {
    width: 210mm;
    height: 297mm;
  }
}

page-break-inside에 대한 p그리고 content-block나를 위해 매우 중요했다. 내가 p다음을 가지고있을 때마다 h*, 나는 div class = "content-block">그들이 함께 있고 깨지지 않도록 두 가지를 모두 포장합니다 .

나는 누군가가 이것을 알아 내기 위해 3 시간이 걸렸기 때문에 이것이 유용하다고 기대하고 있습니다 (CSS / HTML을 처음 사용하기 때문에 …)

편집하다

의견의 요청에 따라 예제 HTML 문서를 추가하고 있습니다. 이 파일을 HTML 파일로 복사하여 연 다음 페이지 인쇄를 선택합니다. 인쇄 미리보기에이 작업이 표시되어야합니다. Firefox와 IE에서 결국 작동했지만 Chrome은 한 페이지에 맞도록 글꼴을 작게 만들었으므로 작동하지 않았습니다.

footer {
  font-size: 9px;
  color: #f00;
  text-align: center;
}

@page {
  size: A4;
  margin: 11mm 17mm 17mm 17mm;
}

@media print {
  footer {
    position: fixed;
    bottom: 0;
  }

  .content-block, p {
    page-break-inside: avoid;
  }

  html, body {
    width: 210mm;
    height: 297mm;
  }
}
<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <h1>
      Example Document
    </h1>
    <div>
      <p>
        This is an example document that shows how to have a footer that repeats at the bottom of every page, but also isn't covered up by paragraph text.
      </p>
    </div>
    <div>
      <h3>
        Example Section I
      </h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum metus sit amet urna lobortis sollicitudin. Nulla mattis purus porta lorem tempor, a cursus tellus facilisis. Aliquam pretium nibh vitae elit placerat vestibulum. Duis felis ipsum, consectetur id pellentesque in, porta sit amet sapien. Ut tristique enim sem, laoreet bibendum nisl fermentum vitae. Ut aliquet sem ac lorem malesuada sodales. Fusce iaculis ipsum ex, in mollis dolor dapibus sit amet. In convallis felis in orci fermentum gravida a vel orci. Sed tincidunt porta nibh sit amet varius. Donec et odio eget odio tempus auctor ac eget ex.

        Pellentesque vitae augue sed purus dictum ultricies at eu neque. Nullam ut mauris a purus tristique euismod. Sed elementum, leo id placerat congue, leo tellus pharetra orci, eget ultricies odio quam sit amet ipsum. Praesent feugiat, lorem at commodo egestas, felis ligula pharetra sapien, in placerat mauris nisi aliquet tortor. Quisque nibh lectus, laoreet vel mollis a, tincidunt vel ipsum. Sed blandit vehicula sollicitudin. Donec et sapien justo. Ut fermentum ipsum imperdiet diam condimentum, eget varius sapien dictum. Sed sed elit egestas libero maximus finibus eu eget massa.

        Duis finibus vestibulum finibus. Nunc lobortis lacus ut libero mattis tempor. Nulla a nunc at nisl elementum congue. Nunc eu consectetur mauris. Etiam non placerat massa. Etiam eu urna in metus tempus molestie sed eget diam. Nunc sem velit, elementum sit amet fringilla in, dictum sit amet sem. Quisque convallis faucibus purus dignissim dictum. Sed semper, mi vel accumsan sollicitudin, massa massa pellentesque justo, eget auctor sapien enim ac elit.

        Nullam turpis augue, lacinia ut libero ac, rhoncus bibendum ligula. Mauris ullamcorper maximus turpis, a consequat turpis bibendum sit amet. Nam vitae dui nec velit hendrerit faucibus. Vivamus nunc diam, porta tristique augue nec, dignissim venenatis felis. Proin mattis id risus in feugiat. Etiam cursus faucibus nisi. In in nisi ullamcorper, convallis lectus et, ornare nulla. Cras tristique nulla eros, non maximus odio imperdiet eu. Nullam egestas dignissim est, et fringilla odio pretium eleifend. Nullam tincidunt sapien fermentum, rhoncus risus ac, ullamcorper libero. Vestibulum bibendum molestie dui nec tincidunt. Mauris tempus, orci ut congue vulputate, erat orci aliquam orci, sed eleifend orci dui sed tellus. Pellentesque pellentesque massa vulputate urna pretium, consectetur pulvinar orci pulvinar.

        Donec aliquet imperdiet ex, et tincidunt risus convallis eget. Etiam eu fermentum lectus, molestie eleifend nisi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam dignissim, erat vitae congue molestie, ante urna sagittis est, et sagittis lacus risus vitae est. Sed elementum ipsum et pellentesque dignissim. Sed vehicula feugiat pretium. Donec ex lacus, dictum faucibus lectus sit amet, tempus hendrerit ante. Ut sollicitudin sodales metus, at placerat risus viverra ut.

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum metus sit amet urna lobortis sollicitudin. Nulla mattis purus porta lorem tempor, a cursus tellus facilisis. Aliquam pretium nibh vitae elit placerat vestibulum. Duis felis ipsum, consectetur id pellentesque in, porta sit amet sapien. Ut tristique enim sem, laoreet bibendum nisl fermentum vitae. Ut aliquet sem ac lorem malesuada sodales. Fusce iaculis ipsum ex, in mollis dolor dapibus sit amet. In convallis felis in orci fermentum gravida a vel orci. Sed tincidunt porta nibh sit amet varius. Donec et odio eget odio tempus auctor ac eget ex.

        Duis finibus vestibulum finibus. Nunc lobortis lacus ut libero mattis tempor. Nulla a nunc at nisl elementum congue. Nunc eu consectetur mauris. Etiam non placerat massa. Etiam eu urna in metus tempus molestie sed eget diam. Nunc sem velit, elementum sit amet fringilla in, dictum sit amet sem. Quisque convallis faucibus purus dignissim dictum. Sed semper, mi vel accumsan sollicitudin, massa massa pellentesque justo, eget auctor sapien enim ac elit.

        Nullam turpis augue, lacinia ut libero ac, rhoncus bibendum ligula. Mauris ullamcorper maximus turpis, a consequat turpis bibendum sit amet. Nam vitae dui nec velit hendrerit faucibus. Vivamus nunc diam, porta tristique augue nec, dignissim venenatis felis. Proin mattis id risus in feugiat. Etiam cursus faucibus nisi. In in nisi ullamcorper, convallis lectus et, ornare nulla. Cras tristique nulla eros, non maximus odio imperdiet eu. Nullam egestas dignissim est, et fringilla odio pretium eleifend. Nullam tincidunt sapien fermentum, rhoncus risus ac, ullamcorper libero.
      </p>
    </div>
    <div class="content-block">
      <h3>Example Section II</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum metus sit amet urna lobortis sollicitudin. Nulla mattis purus porta lorem tempor, a cursus tellus facilisis. Aliquam pretium nibh vitae elit placerat vestibulum. Duis felis ipsum, consectetur id pellentesque in, porta sit amet sapien. Ut tristique enim sem, laoreet bibendum nisl fermentum vitae. Ut aliquet sem ac lorem malesuada sodales. Fusce iaculis ipsum ex, in mollis dolor dapibus sit amet. In convallis felis in orci fermentum gravida a vel orci. Sed tincidunt porta nibh sit amet varius. Donec et odio eget odio tempus auctor ac eget ex.

        Pellentesque vitae augue sed purus dictum ultricies at eu neque. Nullam ut mauris a purus tristique euismod. Sed elementum, leo id placerat congue, leo tellus pharetra orci, eget ultricies odio quam sit amet ipsum. Praesent feugiat, lorem at commodo egestas, felis ligula pharetra sapien, in placerat mauris nisi aliquet tortor. Quisque nibh lectus, laoreet vel mollis a, tincidunt vel ipsum. Sed blandit vehicula sollicitudin. Donec et sapien justo. Ut fermentum ipsum imperdiet diam condimentum, eget varius sapien dictum. Sed sed elit egestas libero maximus finibus eu eget massa.
      </p>
    </div>
    <footer>
      This is the text that goes at the bottom of every page.
    </footer>
  </body>
</html>

스 니펫 확장

답변

몇 년 동안 해결책을 찾고 있었고 페이지 내용이 겹치지 않고 여러 페이지에서 작동하는 바닥 글을 인쇄하는 방법 에 대한 이 게시물을 발견했습니다 .

내 요구 사항은 IE8 이었으므로 지금까지 Chrome에서 작동하지 않는 것으로 나타났습니다. [ 업데이트 ] 2018 년 3 월 1 일 현재 Chrome에서도 작동합니다.

이 예제는 CSS 스타일을 설정하여 테이블과 tfoot 요소를 사용합니다. 

tfoot {display: table-footer-group;}

답변

마술 솔루션은 실제로 모든 것을 단일 테이블에 넣습니다.

  • thead : 이것은 반복되는 헤더를위한 것입니다.

  • tfoot : 반복 된 바닥 글

  • tbody : 내용.

하나의 tr, td를 만들고 모든 것을 div에 넣습니다.

코드 ::

<table class="report-container">
   <thead class="report-header">
     <tr>
        <th class="report-header-cell">
           <div class="header-info">
            ...
           </div>
         </th>
      </tr>
    </thead>
    <tfoot class="report-footer">
      <tr>
         <td class="report-footer-cell">
           <div class="footer-info">
           ...
           </div>
          </td>
      </tr>
    </tfoot>
    <tbody class="report-content">
      <tr>
         <td class="report-content-cell">
            <div class="main">
            ...
            </div>
          </td>
       </tr>
     </tbody>
</table>
table.report-container {
    page-break-after:always;
}
thead.report-header {
    display:table-header-group;
}
tfoot.report-footer {
    display:table-footer-group;
}

특별한 : 여러 페이지가 겹치지 않도록합니다. 처럼:

<div class="main">
    <div class="article">
        ...
  </div>
    <div class="article">
        ...
  </div>
    <div class="article">
        ...
  </div>
  ...
  ...
  ...
</div>

오버플로로 인해 페이지 나누기 내의 헤더와 겹치게됩니다.

>> 사용 : page-break-inside: avoid !important;이 클래스와 함께 사용하십시오 article.

table.report-container div.article {
    page-break-inside: avoid;
}

아주 간단합니다. 이것이 원하는 결과를 얻을 수 있기를 바랍니다.

친애하는. 😉

소스 ..

답변

에서 이 질문 – 인쇄 전용 스타일 시트에 다음과 같은 스타일을 추가합니다. 이 솔루션은 IE 및 Firefox에서는 작동하지만 Chrome 에서는 작동 하지 않습니다 (버전 21 기준).

#header {
  display: table-header-group;
}

#main {
  display: table-row-group;
}

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

답변

CSS에서 스타일을 정의 하려면 페이지 나누기 를 사용 하십시오 .

@media all
  {
  #page-one, .footer, .page-break { display:none; }
  }

@media print
  {
  #page-one, .footer, .page-break   
    {
    display: block;
    color:red;
    font-family:Arial;
    font-size: 16px;
    text-transform: uppercase;
    }
  .page-break
    {
    page-break-before:always;
    }
}

그런 다음 문서의 적절한 위치에 마크 업을 추가하십시오.

<h2 id="page-one">unclassified</h2>
<!-- content block -->
<h2 class="footer">unclassified</h2>
<h2 class="page-break">unclassified</h2>
<!-- content block -->
<h2 class="footer">unclassified</h2>
<h2 class="page-break">unclassified</h2>
<!-- content block -->
<h2 class="footer">unclassified</h2>
<h2 class="page-break">unclassified</h2>
<!-- content block -->
<h2 class="footer">unclassified</h2>
<h2 class="page-break">unclassified</h2>

참고 문헌