인쇄하는 동안 끝에 추가 빈 페이지를 피하는 방법은 무엇입니까?
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>
추가 할 수 있습니다.
.print:last-child {
page-break-after: auto;
}
따라서 마지막 print요소는 추가 페이지 나누기를 얻지 않습니다.
: last-child 선택기는 브라우저를 대상으로하는 경우 IE8에서 지원되지 않습니다.
이거 해봤 어?
@media print {
html, body {
height: 99%;
}
}
여기에 설명 된 솔루션이 도움이되었습니다 ( webarchive 링크 ).
우선 모든 요소에 테두리를 추가하여 새 페이지가 추가되는 원인을 확인할 수 있습니다 (여백, 패딩 등).
div { border: 1px solid black;}
솔루션 자체는 다음 스타일을 추가하는 것이 었습니다.
html, body { height: auto; }
그 어느 것도 작동하지 않으면 이것을 시도하십시오
@media print {
html, body {
height:100vh;
margin: 0 !important;
padding: 0 !important;
overflow: hidden;
}
}
100vh인지 확인하십시오
이것은 나를 위해 작동합니다
.print+.print {
page-break-before: always;
}
(지금은) 이유를 모르지만 이것이 도움이되었습니다.
@media print {
html, body {
border: 1px solid white;
height: 99%;
page-break-after: avoid;
page-break-before: avoid;
}
}
누군가가 문제와 싸우면서 머리카락을 구할 수 있기를 바랍니다 ...;)
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
display:none인쇄용이 아닌 다른 모든 요소에 대해 설정 됩니다. 설정 visibility:hidden하면 숨겨 지지만 모두 여전히 거기에 있으며 공간을 차지했습니다. 빈 페이지는 숨겨진 요소를위한 것입니다.
제 경우에는 너비를 모든 div로 설정하는 것이 도움이되었습니다.
.page-content div {
width: auto !important;
max-width: 99%;
}
인쇄 영역의 CSS 표시 및 너비 속성을 변경했습니다.
#printArea{
display:table;
width:100%;
}다양한 페이지 나누기 설정과 높이, 그리고 body 태그에 대한 수많은 CSS 규칙으로 고생 한 끝에 마침내 1 년이 넘게 해결했습니다.
페이지에서 인쇄되는 유일한 것이어야하는 div가 있지만 그 후에 여러 개의 빈 페이지가 나타납니다. 내 몸 태그가로 설정 visibility:hidden;되었지만 충분하지 않았습니다. 세로로 긴 페이지 요소는 여전히 '공간'을 차지합니다. 그래서 이것을 인쇄 CSS 규칙에 추가했습니다.
#header, #menu, #sidebar{ height:1px; display:none;}
긴 페이지 레이아웃 요소를 포함하는 ID로 특정 div를 타겟팅합니다. 높이를 줄인 다음 레이아웃에서 제거했습니다. 더 이상 빈 페이지가 없습니다. 몇 년 후 나는 내 고객에게 내가 그것을 깨뜨렸다 고 말할 수있어 기쁩니다. 이것이 누군가를 돕기를 바랍니다.
가능한 원인이 많이있는 것 같습니다. 주제 태그가 이유 때문에 너무 큰 것으로 간주되는 높이로 끝날 가능성이있는 주제입니다.
내 원인 : min-height: 100%기본 스타일 시트에서.
내 솔루션 : min-height: autoA의 @media print지시어.
참고 autoPhpStorm에 따르면, 올바른 값을 될 것 같지 않았다. 그러나 min-height 에 대한 Mozilla의 문서에 따르면 정확합니다 .
auto
플렉스 항목의 기본 최소 크기로, 다른 레이아웃에 대해 0보다 더 합리적인 기본값을 제공합니다.
Add this css to same page to extend css file.
<style type="text/css">
<!--
html, body {
height: 95%;
margin: 0 0 0 0;
}
-->
</style>
I tryed all solutions, this works for me:
<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>
Chrome seems to have a bug where in certain situations, hiding elements post-load with display:none, leaves a lot of extra space behind. I would guess they are calculating document height before the document is done rendering. Chrome also fires 2 media change events, and doesn't support onbeforeprint, etc. They are basically being the ie of printing. Here's my workaround:
@media print {
body {
display: none;
}
}
body.printing {
display: block;
}
You give body class="printing" on doc ready, and that enables the print styles. This system allows for modularization of print styles, and in-browser print preview.
I just encountered a case where changing from
</div>
<script src="addressofjavascriptfile.js"></script>
</body>
</html>
to
<script src="addressofjavascriptfile.js"></script>
</div>
</body>
</html>
fixed this problem.
.print:last-child{
page-break-after: avoid;
page-break-inside: avoid;
margin-bottom: 0px;
}
This worked for me.
I had a similar issue but the cause was because I had 40px of margin at the bottom of the page, so the very last row would always wrap even if there were room for it on the last page. Not because of any kind of page-break-* css command. I fixed by removing the margin on print and it worked fine. Just wanted to add my solution in case someone else has something similar!
None of the answers worked with me, but after reading all of them, I figured out what was the issue in my case I have 1 Html page that I want to print but it was printing with it an extra white blank page. I am using AdminLTE a bootstrap 3 theme for the page of the report to print and in it the footer tag I wanted to place this text to the bottom right of the page:
Printed by Mr. Someone
I used jquery to put that text instead of the previous "Copy Rights" footer with
$("footer").html("Printed by Mr. Someone");
and by default in the theme the tag footer uses the class .main-footer which has the attributes
padding: 15px;
border-top: 1px solid
that caused an extra white space, so after knowing the issue, I had different options, and the best option was to use
$( "footer" ).removeClass( "main-footer" );
Just in that specific page
Strangely setting a transparent border solved this for me:
@media print {
div {
border: 1px solid rgba(0,0,0,0)
}
}
Maybe it will suffice to set the border on the container element. <- Untestet.
Put the stuff you need on a page in a div and use page-break-inside:avoid on that div. Your div will stay on one page and go onto a second or third page if needed, but the next div, should it have to do a page break, should start on the next page.
참고URL : https://stackoverflow.com/questions/7846346/how-to-avoid-extra-blank-page-at-end-while-printing
'Programing' 카테고리의 다른 글
| 계속 "tsc.exe"가 코드 1로 종료 됨 (0) | 2020.10.28 |
|---|---|
| 문자열에 따옴표를 포함하는 방법 (0) | 2020.10.28 |
| Laravel 4 마이그레이션 롤백 문제 (0) | 2020.10.28 |
| Android에서 사용자 지정 등급 표시 줄을 만드는 방법 (0) | 2020.10.28 |
| Java에서 CamelCase를 camel_case로 변환하는 정규식 (0) | 2020.10.28 |