인쇄하는 동안 끝에 추가 빈 페이지를 피하는 방법은 무엇입니까?

88

CSS 속성을 사용하고 있습니다.

page-break-after: always;=> 사용하면 이전에 추가 빈 페이지를 인쇄합니다.

page-break-before: always;=>를 사용하면 나중에 빈 페이지가 추가로 인쇄됩니다. 이것을 피하는 방법?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.print{
    page-break-after: always;

}
</style>
<script type="text/javascript">
window.print();
</script>
</head>
<body>
<div class="print">fd</div>
<div class="print">fdfd</div>
</body>
</html>
css  printing 
— 안젤 린 나 다르
소스
인쇄 클래스의 높이는 얼마입니까?
— juankysmith
1
송장의 경우 높이가 항목 수에 따라 동적으로 변경됩니다.
— Angelin Nadar
4
이것이 우리가 냉전에서 한 방법입니다.<div>This page intentionally left blank.</div>
— Bob Stein

답변:

72

추가 할 수 있습니다.

.print:last-child {
     page-break-after: auto;
}

따라서 마지막 print요소는 추가 페이지 나누기를 얻지 않습니다.

: last-child 선택기는 브라우저를 대상으로하는 경우 IE8에서 지원되지 않습니다.

— AKX
소스
88
"IE에서는 지원되지 않습니다"등의 확인은 IE의 dafault 기능입니다
— Angelin Nadar
다른 독자에게는 이것이 저에게 효과가 없었지만 HTML 및 body 요소에 자동 높이를 설정하는 아래 답변은 매력처럼 작동했습니다.
— Cody
101

이거 해봤 어?

@media print {
    html, body {
        height: 99%;    
    }
}
— giannis.epp
소스
2
나를 위해 일했다 : @media print {html {높이 : 99 %; }}, 몸 생성 된 문서는 더 크다
— 구스타보
10
제 경우에는 Zurb Foundation 이 html과 body를 height: 100%. 나는 이것을 오버라이드 (override) 할 수 있었다height: auto
— zacharydl
4
@ zacharydl의 댓글이 저를 위해 작동하고, 또한이 있음을 확인 height: auto;보다 더 우아height: 99%;
— jontsai
스크롤바가 항상 표시되도록 html 높이를 101 %로 설정했기 때문에이 문제가 발생했습니다. (페이지 사이의 점프를 제거합니다)-예, 인쇄 스타일의 100 % 높이는 맛있는 수정입니다! -건배.
— rob_james
@rob_james 101 % 사용을 피하려면 overflow-y를 설정할 수 있습니다. scroll; 스크롤바가 항상 보이도록하기 위해
— user161592
46

여기에 설명 된 솔루션이 도움이되었습니다 ( webarchive 링크 ).

우선 모든 요소에 테두리를 추가하여 새 페이지가 추가되는 원인을 확인할 수 있습니다 (여백, 패딩 등).

div { border: 1px solid black;}

해결책 자체는 다음 스타일을 추가하는 것이 었습니다.

html, body { height: auto; }
— 마이클 라디오 노프
소스
9
와우 이건 내 오래된 블로그 였어! 난 그냥 같은 문제가 없었다 나는 이미 한 번 ^^ 작은 세계 고정 된 생각
— 미구엘 스티븐스
3
div 테두리를 추가하려면 1을 더합니다.
— Iftikhar Ali Ansari
테두리를 추가하는 것은 정말 좋은 생각이었습니다 !! 내 페이지 래퍼에 최소 높이가 설정되어 추가 페이지가 표시된다는 사실을 알게되었습니다. 나는 잠시 동안 이것에 머리를 부딪혔다. 정말 고맙습니다!
— erichunt
33

그 어느 것도 작동하지 않으면 이것을 시도하십시오

@media print {

    html, body {
      height:100vh; 
      margin: 0 !important; 
      padding: 0 !important;
      overflow: hidden;
    }

}

100vh인지 확인하십시오

— 브라이언 찬
소스
4
높이를 100vh로 설정하면 문제가 해결되었습니다. 감사합니다
— user2398069
1
"@media print {* {overflow : hidden! important;}}"는 저에게 매우 중요합니다.
— shinriyo dec.
1
마침내 모호한 문제에 대한 답! OSX의 Safari는 완전히 빈 페이지를 표시했지만 Chrome, FF 및 Edge는 모두 미리보기에 적합했습니다. 감사합니다!
— 팝
100vh에 높이 세트를 갖는 것은, 더 이상의 페이지를로드에서 유지 될 것으로 보인다 그래서 문서 미리보기에 첫 번째 페이지가로드 한 페이지 이상이있는 경우
— 필리페
5

CSS를 사용하고 페이지 나누기를 피하려면 다음을 사용하십시오. 

.print{
    page-break-after: avoid;

}

페이징 된 미디어 살펴보기

pageBreakBefore 및 pageBreakAfter에 해당하는 스크립트를 사용하여 해당 값을 동적으로 할당 할 수 있습니다. 예를 들어 방문자에게 사용자 지정 페이지 나누기를 강제하는 대신 스크립트를 만들어 선택 사항으로 만들 수 있습니다. 여기에서는 머리글 (h2)과 프린터 자체 재량 (기본값)에서 페이지 분할 사이를 전환하는 확인란을 만듭니다.

<form name="myform">
<input type="checkbox" name="mybox" onClick="breakeveryheader()">
</form>

<script type="text/javascript">
 function breakeveryheader(){
 var thestyle=(document.forms.myform.mybox.checked)? "always" : "auto"
 for (i=0; i<document.getElementsByTagName("H2").length; i++)
 document.getElementsByTagName("H2")[i].style.pageBreakBefore=thestyle
 }

이것을 사용하는 예를 보려면 여기 를 클릭 하십시오 . 스크립트 내의 H2를 P 또는 DIV와 같은 다른 태그로 대체 할 수 있습니다.

http://www.javascriptkit.com/dhtmltutors/pagebreak.shtml

— bilash.saha
소스
4

(지금은) 이유를 모르지만 이것이 도움이되었습니다.

   @media print {
        html, body {
            border: 1px solid white;
            height: 99%;
            page-break-after: avoid;
            page-break-before: avoid;
        }
    }

누군가가 문제와 싸우면서 머리카락을 구할 수 있기를 바랍니다 ...;)

— 아담 G.
소스
4

가능한 원인이 많이있는 것 같습니다. 주제는 body 태그가 이유 때문에 너무 큰 것으로 간주되는 높이로 끝날 가능성이 높습니다.

내 원인 : min-height: 100%기본 스타일 시트에서.

내 솔루션 : min-height: autoA의 @media print지시어.

참고 autoPhpStorm에 따르면, 올바른 값을 될 것 같지 않았다. 그러나 min-height 에 대한 Mozilla의 문서에 따르면 정확합니다 .

auto
플렉스 항목의 기본 최소 크기로, 다른 레이아웃에 대해 0보다 더 합리적인 기본값을 제공합니다.

— 조지 마리안
소스
그냥 'min-height : initial! important;' 그리고 그것은 나를 위해 일했습니다.
— Siby 토마스
@SibyThomas 가능하다면! 중요한 선언을 피합니다. 속성을 재정의하기가 더 어려워집니다. initial동적 크기의 요소에 문제가 될 것이라고 생각 했기 때문에 고려하지 않았습니다 . 초기 값은 0이므로 auto일반적으로 더 유용 하다고 가정 합니다.
— George Marian 2016 년
3

display:none인쇄용이 아닌 다른 모든 요소에 대해 설정 됩니다. 설정 visibility:hidden하면 숨겨져 있지만 모두 여전히 거기에 있으며 공간을 차지했습니다. 빈 페이지는 숨겨진 요소를위한 것입니다.

— 자 나카 R 라자 팍샤
소스
3

제 경우에는 너비를 모든 div로 설정하는 것이 도움이되었습니다. 

.page-content div {
    width: auto !important;
    max-width: 99%;
}
— 마르 야누스
소스
3

비슷한 문제가 있었지만 원인은 페이지 하단에 40px의 여백이 있었기 때문에 마지막 페이지에 공간이 있어도 맨 마지막 행이 항상 줄 바꿈되었습니다. 어떤 종류의 page-break-*css 명령 때문이 아닙니다 . 인쇄물의 여백을 제거하여 문제를 해결했는데 제대로 작동했습니다. 다른 사람이 비슷한 것을 가질 경우를 대비하여 내 솔루션을 추가하고 싶었습니다!

— AlexMorley-Finch
소스
2

다양한 페이지 나누기 설정과 높이, 그리고 body 태그에 대한 수많은 CSS 규칙으로 고생 한 끝에 마침내 1 년이 넘게 해결했습니다.

페이지에서 인쇄되는 유일한 것이어야하는 div가 있지만 그 후에 여러 개의 빈 페이지가 나타납니다. 내 몸 태그가로 설정 visibility:hidden;되었지만 충분하지 않았습니다. 세로로 긴 페이지 요소는 여전히 '공간'을 차지합니다. 그래서 이것을 인쇄 CSS 규칙에 추가했습니다.

#header, #menu, #sidebar{ height:1px; display:none;}

긴 페이지 레이아웃 요소를 포함하는 ID로 특정 div를 타겟팅합니다. 높이를 줄인 다음 레이아웃에서 제거했습니다. 더 이상 빈 페이지가 없습니다. 몇 년 후 나는 내 고객에게 내가 그것을 깨뜨렸다 고 말할 수있어 기쁩니다. 이것이 누군가를 돕기를 바랍니다.

— 셰리
소스
예, 사용 visibility: hidden;하면 여전히 공간을 차지합니다. 사용 display: none;하시면 공간이 제거됩니다. 이 시점에서 특별히 높이를 설정할 필요는 없습니다.
— chapeljuice
2

Chrome은 특정 상황에서 display : none으로로드 후 요소를 숨기는 버그가있는 것 같습니다. 문서가 렌더링되기 전에 문서 높이를 계산하고 있다고 생각합니다. Chrome은 또한 2 개의 미디어 변경 이벤트를 발생시키고 onbeforeprint 등을 지원하지 않습니다. 기본적으로 인쇄의 ie입니다. 내 해결 방법은 다음과 같습니다.

@media print {
    body {
        display: none;
    }
}

body.printing {
    display: block;
}

문서에서 body class = "printing"을 준비하면 인쇄 스타일을 사용할 수 있습니다. 이 시스템은 인쇄 스타일의 모듈화 및 브라우저 내 인쇄 미리보기를 허용합니다.

— 기구
소스
1

이 CSS를 동일한 페이지에 추가하여 CSS 파일을 확장하십시오.

<style type="text/css">
   <!--
   html, body {
    height: 95%; 
    margin: 0 0 0 0;
     }
   -->
</style>
— Alnassre
소스
1

나는 모든 솔루션을 시도했지만 이것은 나를 위해 작동합니다.

<style>
    @page {
        size: A4;
        margin: 1cm;
    }

    .print {
        display: none;
    }

    @media print {
        div.fix-break-print-page {
            page-break-inside: avoid;
        }

        .print {
            display: block;
        }
    }

    .print:last-child {
        page-break-after: auto;
    }
</style>
— Paulo Weverton
소스
1

방금 변경 한 경우를 만났습니다.

    </div>
    <script src="addressofjavascriptfile.js"></script>
</body>
</html>

...에

        <script src="addressofjavascriptfile.js"></script>
    </div>
</body>
</html>

이 문제를 해결했습니다.

— 테리 호너
소스
1 
.print:last-child{
    page-break-after: avoid;
    page-break-inside: avoid;
    margin-bottom: 0px;
}

이것은 나를 위해 일했습니다.

— 손님
소스
1

이상하게 투명한 테두리를 설정하면이 문제가 해결되었습니다.

@media print {
  div {
    border: 1px solid rgba(0,0,0,0)
  }
}

컨테이너 요소에 테두리를 설정하는 것으로 충분할 수 있습니다. <-Untestet.

— Alexloehr
소스
0

대답 중 어느 것도 저와 함께 작동하지 않았지만 모든 것을 읽은 후 제 경우에 문제가 무엇인지 알아 냈습니다. 인쇄하려는 1 Html 페이지가 있지만 여분의 흰색 빈 페이지가 인쇄되었습니다. 인쇄 할 보고서 페이지에 대한 부트 스트랩 3 테마 인 AdminLTE를 사용하고 있으며 그 안에이 텍스트를 페이지 오른쪽 하단에 배치하고 싶었습니다.

Mr. Someone 인쇄

이전 "Copy Rights"바닥 글 대신 jquery를 사용하여

$("footer").html("Printed by Mr. Someone");

기본적으로 테마에서 태그 바닥 글은 속성이있는 .main-footer 클래스를 사용합니다.

padding: 15px;
border-top: 1px solid

추가 공백이 발생했기 때문에 문제를 알게 된 후 다른 옵션이 생겼습니다. 가장 좋은 방법은 

$( "footer" ).removeClass( "main-footer" );

특정 페이지에만

— Yousef Al-Hadhrami
소스
0

필요한 항목을 div의 페이지에 넣고 해당 div에서 page-break-inside : avoid를 사용하세요. div는 한 페이지에 머물며 필요한 경우 두 번째 또는 세 번째 페이지로 이동하지만 페이지 나누기를 수행해야하는 경우 다음 div는 다음 페이지에서 시작해야합니다.

— 릭 터너
소스
0

하단의 html 태그 뒤에 공백이 있는지 확인하세요. 아래의 공백을 제거하면 도움이되었습니다.

— 와세이
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.