làm thế nào để tránh trang trống thừa ở cuối khi in?

Question 1

Tôi đang sử dụng thuộc tính CSS,

Nếu tôi sử dụng page-break-after: always;=> Nó in thêm một trang trống trước đó

Nếu tôi sử dụng page-break-before: always;=> Nó in thêm một trang trống sau đó. Làm thế nào để tránh điều này?

<!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>

Question 2

Bạn có thể thêm

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

vì vậy printphần tử cuối cùng sẽ không bị ngắt trang thừa.

Xin lưu ý rằng bộ chọn: last-child không được hỗ trợ trong IE8, nếu bạn đang nhắm mục tiêu vào trình duyệt tồi tệ đó.

Question 3

Bạn đã thử cái này chưa?

@media print {
    html, body {
        height: 99%;    
    }
}

Question 4

Giải pháp được mô tả ở đây đã giúp tôi ( liên kết lưu trữ web ).

Trước hết, bạn có thể thêm đường viền cho tất cả các phần tử để xem nguyên nhân khiến một trang mới được thêm vào (có thể là một số lề, khoảng đệm, v.v.).

div { border: 1px solid black;}

Và bản thân giải pháp là thêm các kiểu sau:

html, body { height: auto; }

Question 5

nếu Không ai trong số đó hoạt động, hãy thử cái này

@media print {

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

}

đảm bảo rằng nó là 100vh

Question 6

Điều này phù hợp với tôi

.print+.print {
    page-break-before: always;
}

Question 7

Nếu bạn chỉ muốn sử dụng CSS và muốn tránh ngắt trang thì hãy sử dụng

.print{
    page-break-after: avoid;

}

Hãy xem phương tiện được phân trang

Bạn có thể sử dụng tương đương tập lệnh cho pageBreakBefore và pageBreakAfter, gán động các giá trị của chúng. Ví dụ: thay vì buộc ngắt trang tùy chỉnh đối với khách truy cập, bạn có thể tạo tập lệnh để thực hiện điều này tùy chọn. Ở đây tôi sẽ tạo một hộp kiểm chuyển đổi giữa việc cắt trang ở tiêu đề (h2) và theo quyết định riêng của máy in (mặc định):

<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
 }

Bấm vào đây để xem một ví dụ sử dụng cái này. Bạn có thể thay thế H2 bên trong tập lệnh bằng một thẻ khác như P hoặc DIV.

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

Question 8

Không biết (cho đến bây giờ) tại sao, nhưng điều này đã giúp:

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

Hy vọng ai đó sẽ cứu được mái tóc của mình trong khi chiến đấu với vấn đề ...;)

Question 9

Có vẻ như có rất nhiều nguyên nhân có thể xảy ra, với chủ đề có khả năng là thẻ body kết thúc với chiều cao được coi là quá lớn vì lý do w / e.

Nguyên nhân của tôi: min-height: 100%trong một biểu định kiểu cơ sở.

Giải pháp của tôi: min-height: autotrong một @media printchỉ thị.

Lưu ý, autodường như không phải là một giá trị chính xác, theo PhpStorm. Tuy nhiên, nó đúng theo tài liệu của Mozilla về chiều cao tối thiểu :

auto
Kích thước tối thiểu mặc định cho các mục linh hoạt, cung cấp giá trị mặc định hợp lý hơn 0 cho các bố cục khác.

Question 10

đặt display:nonecho tất cả các phần tử khác không dành cho bản in. cài đặt visibility:hiddensẽ giữ chúng ẩn, nhưng tất cả chúng vẫn ở đó và đã dành không gian cho chúng. trang trống dành cho những phần tử ẩn.

Question 11

Trong trường hợp của tôi, việc đặt chiều rộng cho tất cả các div đã giúp:

.page-content div {
    width: auto !important;
    max-width: 99%;
}

Question 12

Tôi đã thay đổi hiển thị css và thuộc tính chiều rộng của vùng in

#printArea{
    display:table;
    width:100%;
}

Mở rộng đoạn mã

Question 13

Tôi đã gặp vấn đề tương tự nhưng nguyên nhân là do tôi có 40px lề ở cuối trang, vì vậy hàng cuối cùng sẽ luôn bị cuốn ngay cả khi có chỗ cho nó ở trang cuối cùng. Không phải vì bất kỳ loại page-break-*lệnh css nào. Tôi đã sửa bằng cách loại bỏ lề trên bản in và nó hoạt động tốt. Chỉ muốn thêm giải pháp của tôi trong trường hợp người khác có điều gì đó tương tự!

Question 14

Sau khi vật lộn với các cài đặt ngắt trang và độ cao khác nhau và hàng triệu quy tắc CSS khác nhau trên thẻ body, cuối cùng tôi đã giải quyết được nó hơn một năm sau.

Tôi có một div được cho là thứ duy nhất trên trang in ra, nhưng tôi đã nhận được một số trang trống sau đó. Thẻ body của tôi được đặt thành visibility:hidden;nhưng điều đó vẫn chưa đủ. Các phần tử trang cao theo chiều dọc vẫn chiếm "không gian". Vì vậy, tôi đã thêm điều này vào các quy tắc CSS in của mình:

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

để nhắm mục tiêu các div cụ thể theo id của chúng có chứa các yếu tố bố cục trang cao. Tôi thu nhỏ chiều cao và sau đó xóa chúng khỏi bố cục. Không còn trang trống. Nhiều năm sau, tôi rất vui khi nói với khách hàng của mình rằng tôi đã bẻ khóa nó. Hy vọng điều này sẽ giúp ai đó.

Question 15

Chrome dường như có một lỗi trong đó trong một số tình huống nhất định, ẩn các phần tử sau khi tải với hiển thị: không có, để lại rất nhiều khoảng trống. Tôi đoán họ đang tính toán chiều cao của tài liệu trước khi tài liệu được hoàn thành hiển thị. Chrome cũng kích hoạt 2 sự kiện thay đổi phương tiện và không hỗ trợ onbeforeprint, v.v. Về cơ bản, chúng chỉ là in. Đây là cách giải quyết của tôi:

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

body.printing {
    display: block;
}

Bạn cung cấp cho body class = "print" trên tài liệu đã sẵn sàng và điều đó cho phép các kiểu in. Hệ thống này cho phép mô-đun hóa kiểu in và xem trước bản in trong trình duyệt.

Question 16

Thêm css này vào cùng một trang để mở rộng tệp css.

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

Question 17

Tôi đã thử tất cả các giải pháp, điều này phù hợp với tôi:

<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>

Question 18

Tôi vừa gặp một trường hợp thay đổi từ

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

đến

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

đã khắc phục sự cố này.

Question 19

.print:last-child{
    page-break-after: avoid;
    page-break-inside: avoid;
    margin-bottom: 0px;
}

Điều này đã làm việc cho tôi.

Question 20

Thật kỳ lạ khi đặt một đường viền trong suốt đã giải quyết được vấn đề này cho tôi:

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

Có thể chỉ cần đặt đường viền trên phần tử vùng chứa là đủ. <- Bỏ cài.

Question 21

Không có câu trả lời nào phù hợp với tôi, nhưng sau khi đọc tất cả chúng, tôi đã tìm ra vấn đề trong trường hợp của mình là gì, tôi có 1 trang Html muốn in nhưng nó lại in thêm một trang trống màu trắng. Tôi đang sử dụng AdminLTE một chủ đề bootstrap 3 cho trang báo cáo để in và trong đó thẻ footer tôi muốn đặt văn bản này ở dưới cùng bên phải của trang:

In bởi Mr. Ai đó

Tôi đã sử dụng jquery để đặt văn bản đó thay vì chân trang "Quyền sao chép" trước đó với

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

và theo mặc định trong chủ đề, chân trang thẻ sử dụng lớp .main-footer có các thuộc tính

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

điều đó gây ra thêm một khoảng trắng, vì vậy sau khi biết sự cố, tôi có các tùy chọn khác nhau và tùy chọn tốt nhất là sử dụng

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

Chỉ trong trang cụ thể đó

Question 22

Đặt những thứ bạn cần trên một trang trong một div và sử dụng page-break-inside: tránh trên div đó. Div của bạn sẽ ở trên một trang và chuyển sang trang thứ hai hoặc thứ ba nếu cần, nhưng div tiếp theo, nếu nó phải ngắt trang, nên bắt đầu ở trang tiếp theo.

Question 23

Kiểm tra xem có bất kỳ khoảng trắng nào sau thẻ html ở dưới cùng không. Xóa bất kỳ khoảng trắng nào bên dưới đã giúp tôi