Ngắt trang in trên Google Chrome

110

Tôi đang cố gắng để google chrome thực hiện ngắt trang.

Tôi đã được thông báo qua một loạt các trang web page-break-after: always;hợp lệ trong chrome nhưng dường như tôi không thể làm cho nó hoạt động ngay cả với một ví dụ rất đơn giản. có cách nào để buộc ngắt trang khi in trong chrome không?

css printing google-chrome

— Mike Valstar
nguồn

Dường như điều này có tương đối gần đây (tháng 2 năm 2014) được thảo luận (trên một tuổi vé lỗi 2005) trên webkit lỗi tracker bugs.webkit.org/show_bug.cgi?id=5097

— Alex KeySmith

134

Tôi đã sử dụng thành công cách tiếp cận sau trong tất cả các trình duyệt chính bao gồm Chrome:

<!DOCTYPE html>

<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <title>Paginated HTML</title>
    <style type="text/css" media="print">
      div.page
      {
        page-break-after: always;
        page-break-inside: avoid;
      }
    </style>
  </head>
  <body>
    <div class="page">
      <h1>This is Page 1</h1>
    </div>
    <div class="page">
      <h1>This is Page 2</h1>
    </div>
    <div class="page">
      <h1>This is Page 3</h1>
    </div>
  </body>
</html>

Đây là một ví dụ đơn giản hóa. Trong mã thực, mỗi div trang chứa nhiều phần tử hơn.

— Phil Ross
nguồn

4

Ah tôi thấy vấn đề của tôi, tôi nghĩ. Tôi đã cố gắng sử dụng nó với thẻ <br/>

— Mike Valstar

@Mike Cảm ơn bạn đã giải đáp vấn đề cho tôi. Không chắc tại sao br không hoạt động và div thì có, nhưng dù sao thì cũng dễ dàng thay đổi.

— Jeff Davis,

điều này hoạt động khi bạn cố gắng sử dụng với trang mẹ, nhưng không hoạt động khi bạn in từ iframe (tất nhiên là trong chrome).

— VJ

Cũng đọc câu trả lời của @ peter bên dưới; anh ấy cũng có một điểm tốt về position: relative.

— Dough1ejack

6

Theo thông số kỹ thuật break-aftervà break-beforechỉ áp dụng cho block-level elements, table row groups, table rows (but see prose): drafts.csswg.org/css-break-3/#break-between - có nghĩa là không có phao hoặc bất kỳ thủ thuật định vị ưa thích nào.

— Mikko Rantalainen

34

Trên thực tế, một chi tiết còn thiếu trong câu trả lời được chọn là chấp nhận (từ Phil Ross) ....

nó KHÔNG hoạt động trong Chrome và giải pháp thực sự ngớ ngẩn !!

Cả phần tử gốc và phần tử mà bạn muốn kiểm soát ngắt trang phải được khai báo là:

position: relative

kiểm tra trò chơi này: http://jsfiddle.net/petersphilo/QCvA5/5/show/

Điều này đúng cho:

page-break-before
page-break-after
page-break-inside

Tuy nhiên, điều khiển ngắt trang trong Safari không hoạt động (ít nhất là trong 5.1.7)

Tôi hi vọng cái này giúp được!!!

Tái bút: Câu hỏi dưới đây đưa ra thực tế rằng các phiên bản Chrome gần đây không còn tôn trọng điều này nữa, ngay cả với vị trí: tương đối; lừa. Tuy nhiên, họ có vẻ tôn trọng:

-webkit-region-break-inside: avoid;

xem trò chơi này: http://jsfiddle.net/petersphilo/QCvA5/23/show

vì vậy tôi đoán chúng ta phải thêm điều đó ngay bây giờ ...

Hi vọng điêu nay co ich!

— Peter
nguồn

Nó phụ thuộc vào phiên bản WebKit được sử dụng nếu nó hoạt động hay không trong Chrome. Chính bạn đã nói rằng nó không hoạt động trong Safari 5.1.7, vì vậy tôi không nghĩ nó ngớ ngẩn chút nào. Phiên bản WK trong những gì họ đã thử nghiệm có thể khác với những gì bạn đã thử nghiệm.

— Joel Peltonen

Trang đó không hoạt động trong Chrome 26.0.1410.65, tôi nhận được 3 trang và trang cuối cùng chỉ có một từ trên đó). Tôi cũng đã cố gắng đảm bảo cả phần tử tôi muốn áp dụng quy tắc và phần tử gốc của nó đều có vị trí: tương đối trên trang của riêng tôi, nhưng nó vẫn sẽ không thêm dấu ngắt trang khi in. Vậy đây có phải là một tính năng có sẵn trong Chrome không?

— Joe Dyndale

Bạn nói đúng .... nó dường như không hoạt động trong các phiên bản chrome gần đây; tuy nhiên, bạn có thể thay thế nó bằng: -webkit-region-break-Inside: tránh; (xem cái này: jsfiddle.net/QCvA5/22/show )

— Peter

@Peter Có cập nhật nào ở đây không? Tôi đã đăng một câu hỏi SO với tiền thưởng cố gắng khắc phục tình huống mà tôi đang sử dụng page-break-inside. Bất kỳ giúp đỡ?

— Zach Saucier

1

Điều này đã làm việc với tôi với một điều kỳ lạ - nó chỉ hoạt động nếu tôi đặt kiểu nội tuyến chứ không phải trong tệp css riêng biệt. Tôi đang sử dụng nó trên phần tử h7. Phiên bản Chrome là 38.0.2125.111 m.

<h7 class="page-breaker" style="display: block;position: relative;page-break-before:always">Grade <?php echo $grade;?></h7>

— Gavin Simpson

16

Tôi chỉ muốn lưu ý ở đây rằng Chrome cũng bỏ qua cài đặt ngắt trang- * css trong các div đã được thả nổi.

Tôi nghi ngờ có một lời biện minh hợp lý cho điều này ở đâu đó trong thông số kỹ thuật css, nhưng tôi đã tìm ra rằng nó có thể giúp ích cho ai đó vào một ngày nào đó ;-)

Một lưu ý khác: IE7 không thể xác nhận cài đặt ngắt trang mà không có chiều cao rõ ràng trên phần tử khối trước đó:

http://social.msdn.microsoft.com/forums/en-US/iewebdevelopment/thread/fe523ec6-2f01-41df-a31d-9ba93f21787b/

— fordareh
nguồn

2

Có thể là do việc thả nổi một phần tử sẽ đưa phần tử đó ra khỏi luồng tài liệu theo cùng một cách định vị tuyệt đối. Các phần tử có vị trí: tuyệt đối sẽ không hoạt động với ngắt trang- *.

— Joe Dyndale

1

Ngoài ra: không được có bất kỳ phần tử nổi hoặc được định vị tuyệt đối nào trong số tất cả các phần tử cha của phần tử có kiểu ngắt trang. Tôi có phụ huynh bootstrap "col-xs-12", khi tôi đặt rõ ràng "float: none" cho nó, ngắt trang bắt đầu hoạt động!

— Stalinko

12

Tôi đã gặp sự cố tương tự như thế này nhưng cuối cùng tôi đã tìm ra giải pháp. Tôi đã có tràn-x: hidden; được áp dụng cho thẻ <html> nên bất kể tôi đã làm gì bên dưới trong DOM, nó sẽ không bao giờ cho phép ngắt trang. Bằng cách hoàn nguyên về tràn-x: hiển thị; nó hoạt động tốt.

Hy vọng rằng điều này sẽ giúp ai đó ngoài kia.

— davidbehan
nguồn

Lưu ý rằng bất kỳ phần tử mẹ nào có thuộc tính tràn nhất định đều có thể gây ra sự cố này. Tôi chỉ thêm quy tắc * { overflow-x: visible }.

— Garrett

10

Bản thân tôi đang gặp sự cố này - ngắt trang của tôi hoạt động trên mọi trình duyệt, trừ Chrome - và có thể tách nó thành phần tử ngắt trang nằm trong ô bảng. (Các mẫu cũ, kế thừa trong CMS.)

Rõ ràng Chrome không tôn trọng các thuộc tính ngắt trang trước hoặc ngắt trang sau trong các ô bảng, vì vậy phiên bản sửa đổi này của ví dụ của Phil đặt dòng tiêu đề thứ hai và thứ ba trên cùng một trang:

<!DOCTYPE html>

<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <title>Paginated HTML</title>
    <style type="text/css" media="print">
      div.page
      {
        page-break-after: always;
        page-break-inside: avoid;
      }
    </style>
  </head>
  <body>
    <div class="page">
      <h1>This is Page 1</h1>
    </div>

    <table>
    <tr>
        <td>
            <div class="page">
              <h1>This is Page 2</h1>
            </div>
            <div class="page">
              <h1>This is, sadly, still Page 2</h1>
            </div>
        </td>
    </tr>
    </table>
  </body>
</html>

Việc triển khai của Chrome (không rõ ràng) được cho phép theo đặc điểm kỹ thuật CSS - bạn có thể xem thêm tại đây: http://www.google.com/support/forum/p/Chrome/thread?tid=32f9d9629d6f6789&hl=vi

— Nate Cook
nguồn

Đây là vấn đề của tôi - buộc phải sử dụng tế bào bảng cho bố trí bởi SharePoint 2007, vì vậy Chrome được tuân theo bất kỳ tờ khai bố trí in style sheet :(

— Dexter

8

Cẩn thận với CSS: display:inline-blockkhi in.

Không có thuộc tính CCS nào để chuyển đến trang tiếp theo sẽ hoạt động đối với tôi trong Chrome và Firefox nếu bảng của tôi nằm bên trong một div có kiểu display:inline-block

Ví dụ: cách sau không hoạt động:

<div style='display:inline-block'>
  <table style='page-break-before:always'>
    ...
  </table>
  <table style='page-break-before:always'>
    ...
  </table>
</div>

Nhưng công việc sau đây:

<div>
  <table style='page-break-before:always'>
    ...
  </table>
  <table style='page-break-before:always'>
    ...
  </table>
</div>

— Gudradain
nguồn

1

Và cả "float" nữa. Không được có bất kỳ thuộc tính "float" nào trong các phần tử mẹ.

— Jimba Tamang,

2

Cùng vớidisplay: flex

— Michael Schmid

4

Tôi đã gặp phải vấn đề này trước đây trên chrome và nguyên nhân là do có một div có chiều cao tối thiểu được đặt thành một giá trị. Giải pháp là đặt lại chiều cao tối thiểu trong khi in như sau:

@media print {
    .wizard-content{
        min-height: 0;
    }
}

— Hamdy Ahmed
nguồn

3

Cập nhật năm 2016:

Tôi gặp vấn đề này, khi tôi có

overflow:hidden

trên div của tôi.

Sau khi tôi thực hiện

@media print {
   div {
      overflow:initial !important
   }
}

mọi thứ trở nên tốt đẹp và hoàn hảo

— x0 z1
nguồn

1

Điều này giải quyết vấn đề khi không có gì khác đã làm. Cảm ơn!

— bstory

1

Nếu bạn đang sử dụng Chrome với Bootstrap Css, các lớp kiểm soát bố cục lưới, ví dụ: col-xs-12, v.v. hãy sử dụng "float: left", như những người khác đã chỉ ra, phá hỏng trang. Xóa chúng khỏi trang của bạn để in. Nó đã làm việc cho tôi. (Trên phiên bản Chrome = 49.0.2623.87)

— Gấu Astra
nguồn

0

Có vấn đề đó. Thời gian trôi qua rất lâu ... Nếu không có các trường bên của trang, nó sẽ ngắt bình thường, nhưng khi các trường xuất hiện, trang và "không gian ngắt trang" sẽ mở rộng. Vì vậy, với một trường bình thường, trong một tài liệu, nó được hiển thị không chính xác. Tôi sửa nó với bộ

    width:100%

Và sử dụng

div.page
  {
    page-break-before: always;
    page-break-inside: avoid;
  }

Sử dụng nó trên dòng đầu tiên.

— Intey
nguồn

0

Theo như tôi biết, cách duy nhất để ngắt trang chính xác trong các bảng với Google Chrome là cung cấp cho phần tử đó hiển thị<tr> thuộc tính : inline-table (hoặc display: inline-block nhưng nó phù hợp hơn trong các trường hợp khác không phải là bảng ). Cũng nên sử dụng các thuộc tính "page-break-after: always; page-break-inside: tránh;" được viết bởi @Phil Ross

<table>
  <tr style="display:inline-table;page-break-after: always; page-break-inside: avoid;">
    <td></td>
    <td></td>
    ...
  </tr>
</table>

— Codekraft
nguồn

1

Bất kỳ gợi ý nào về cách làm điều này để không phá vỡ margin / padding bên trong tds?

— joeforker

@joeforker bạn nên sử dụng <tr> với "padding: 0; margin: 0;" và cung cấp các thuộc tính lề cho các phần tử chứa bên trong.

— Codekraft

-2

Nó đã hoạt động cho tôi khi tôi sử dụng đệm như:

<div style="padding-top :200px;page-break-inside:avoid;">
   <div>My content</div>
</div>

— Tuvia Khusid
nguồn

Điều này chỉ hoạt động do phần đệm chứ không phải do ngắt trang

— Char