Hướng dẫn how to deal with page breaks when printing a large html div - cách đối phó với ngắt trang khi in một div html lớn

Tôi có một dự án yêu cầu in bảng HTML với nhiều hàng.

Vấn đề của tôi là cách bảng được in trên nhiều trang. Đôi khi nó sẽ cắt một hàng làm đôi, khiến nó không thể đọc được vì một nửa nằm trên cạnh chảy máu của một trang và phần còn lại được in trên đầu trang tiếp theo.

Giải pháp hợp lý duy nhất tôi có thể nghĩ đến là sử dụng các div được xếp chồng thay vì một bảng và phá vỡ trang nếu cần .. nhưng trước khi trải qua toàn bộ sự thay đổi, tôi nghĩ rằng tôi có thể hỏi ở đây trước đây.

Jeremy w

1.8116 huy hiệu vàng28 Huy hiệu bạc35 Huy hiệu đồng6 gold badges28 silver badges35 bronze badges

Hỏi ngày 19 tháng 11 năm 2009 lúc 14:24Nov 19, 2009 at 14:24

1

    

        

            
heading
        
        

            
notes
        
        

        

            
x
        
        

            
x
        
        
        

            
x
        
    
    

Wassim sboui

1.6127 Huy hiệu vàng30 Huy hiệu bạc48 Huy hiệu đồng7 gold badges30 silver badges48 bronze badges

Đã trả lời ngày 19 tháng 11 năm 2009 lúc 14:31Nov 19, 2009 at 14:31

Sinan ünürsinan ünürSinan Ünür

Huy hiệu vàng 116K1515 gold badges193 silver badges334 bronze badges

21

Lưu ý: Khi sử dụng trang phá vỡ trang: Luôn luôn cho thẻ, nó sẽ tạo một lần ngắt trang sau bit cuối cùng của bảng, tạo một trang hoàn toàn trống ở cuối mỗi lần! Để khắc phục điều này, chỉ cần thay đổi nó thành trang-break-sau: tự động. Nó sẽ phá vỡ chính xác và không tạo thêm một trang trống.

....

Đã trả lời ngày 14 tháng 10 năm 2011 lúc 5:07Oct 14, 2011 at 5:07

Josh Pjosh pJosh P

1.25514 Huy hiệu bạc12 Huy hiệu đồng14 silver badges12 bronze badges

3

Mở rộng từ giải pháp Sinan ünür:

    

        

            
heading
        
        

            
notes
        
        

            
Long
cell
should'nt
be
cut
        
        

            
Long
cell
should'nt
be
cut
        
        
        

            
x
        
    
    

Có vẻ như

....

8 trong một số trình duyệt chỉ được xem xét đối với các phần tử khối, không phải cho ô, bảng, hàng không khối nội tuyến.

Nếu bạn cố gắng

....

9 Thẻ

    

        

            
heading
        
        

            
notes
        
        

            
Long
cell
should'nt
be
cut
        
        

            
Long
cell
should'nt
be
cut
        
        
        

            
x
        
    
    

0 và sử dụng ở đó

....

8, nó hoạt động, nhưng lộn xộn với bố cục bảng của bạn.

Đã trả lời ngày 11 tháng 9 năm 2013 lúc 14:03Sep 11, 2013 at 14:03

3

Không có câu trả lời nào ở đây làm việc cho tôi trong Chrome. Aaverin trên GitHub đã tạo ra một số JavaScript hữu ích cho mục đích này và điều này có hiệu quả với tôi:

Chỉ cần thêm JS vào mã của bạn và thêm lớp 'splitforprint' vào bảng của bạn và nó sẽ chia nhỏ bảng thành nhiều trang và thêm tiêu đề bảng vào mỗi trang.

Hakan Fıstık

15.4K11 Huy hiệu vàng100 Huy hiệu bạc122 Huy hiệu Đồng11 gold badges100 silver badges122 bronze badges

Đã trả lời ngày 15 tháng 11 năm 2013 lúc 16:25Nov 15, 2013 at 16:25

MdavemdaveMDave

1.06511 Huy hiệu bạc28 Huy hiệu đồng11 silver badges28 bronze badges

4

Sử dụng các thuộc tính CSS này:

page-break-after

page-break-before 

Ví dụ:

....

thông qua

Chris

3.3584 Huy hiệu vàng25 Huy hiệu bạc27 Huy hiệu đồng4 gold badges25 silver badges27 bronze badges

Đã trả lời ngày 19 tháng 11 năm 2009 lúc 14:26Nov 19, 2009 at 14:26

Marcggmarcggmarcgg

63.6K50 Huy hiệu vàng177 Huy hiệu bạc226 Huy hiệu Đồng50 gold badges177 silver badges226 bronze badges

3

Gần đây tôi đã giải quyết vấn đề này với một giải pháp tốt.

CSS::

.avoidBreak { 
    border: 2px solid;
    page-break-inside:avoid;
}

JS::

function Print(){
    $(".tableToPrint td, .tableToPrint th").each(function(){ $(this).css("width",  $(this).width() + "px")  });
    $(".tableToPrint tr").wrap("
");
    window.print();
}

Hoạt động như một sự quyến rũ!

Ông kim tự tháp

3.7355 huy hiệu vàng32 Huy hiệu bạc54 Huy hiệu đồng5 gold badges32 silver badges54 bronze badges

Đã trả lời ngày 30 tháng 6 năm 2015 lúc 15:25Jun 30, 2015 at 15:25

Cuối cùng tôi đã theo cách tiếp cận của @Vicenteherrera, với một số điều chỉnh (có thể là Bootstrap 3 cụ thể).

Về cơ bản; Chúng tôi không thể phá vỡ

    

        

            
heading
        
        

            
notes
        
        

            
Long
cell
should'nt
be
cut
        
        

            
Long
cell
should'nt
be
cut
        
        
        

            
x
        
    
    

2S hoặc

    

        

            
heading
        
        

            
notes
        
        

            
Long
cell
should'nt
be
cut
        
        

            
Long
cell
should'nt
be
cut
        
        
        

            
x
        
    
    

3 vì chúng không phải là các phần tử cấp khối. Vì vậy, chúng tôi đã nhúng các ____24 vào mỗi và áp dụng các quy tắc

    

        

            
heading
        
        

            
notes
        
        

            
Long
cell
should'nt
be
cut
        
        

            
Long
cell
should'nt
be
cut
        
        
        

            
x
        
    
    

5 của chúng tôi đối với

    

        

            
heading
        
        

            
notes
        
        

            
Long
cell
should'nt
be
cut
        
        

            
Long
cell
should'nt
be
cut
        
        
        

            
x
        
    
    

4. Thứ hai; Chúng tôi thêm một số phần đệm vào đỉnh của mỗi div này, để bù đắp cho bất kỳ hiện vật tạo kiểu nào.

Các điều chỉnh lề và đệm là cần thiết để bù đắp một số loại jitter đang được giới thiệu (theo đoán của tôi - từ bootstrap). Tôi không chắc rằng tôi đang trình bày bất kỳ giải pháp mới nào từ các câu trả lời khác cho câu hỏi này, nhưng tôi cho rằng có lẽ điều này sẽ giúp ai đó.

Đã trả lời ngày 22 tháng 6 năm 2016 lúc 17:15Jun 22, 2016 at 17:15

AaronaaronAaron

2.26126 Huy hiệu bạc17 Huy hiệu đồng26 silver badges17 bronze badges

Tôi đã phải đối mặt với cùng một vấn đề và tìm kiếm ở khắp mọi nơi cho một giải pháp, cuối cùng, tôi đã thúc đẩy một cái gì đó phù hợp với tôi cho mọi trình duyệt.

html {
height: 0;
}

Sử dụng CSS này hoặc thay vì CSS, bạn có thể có JavaScript này

$("html").height(0);

Hy vọng điều này cũng sẽ làm việc cho bạn.

Đã trả lời ngày 18 tháng 7 năm 2019 lúc 13:10Jul 18, 2019 at 13:10

Tôi đã kiểm tra nhiều giải pháp và bất cứ ai không hoạt động tốt.

Vì vậy, tôi đã thử một mẹo nhỏ và nó hoạt động:

TOFE với phong cách: ________ 27 được đặt ở cuối trang cuối, nhưng nếu chân trang quá cao thì nó bị chồng chéo bởi nội dung của bảng.

Chỉ với foot chỉ với:

    

        

            
heading
        
        

            
notes
        
        

            
Long
cell
should'nt
be
cut
        
        

            
Long
cell
should'nt
be
cut
        
        
        

            
x
        
    
    

8 không chồng chéo, nhưng không ở cuối trang cuối ...

Hãy đặt hai T foot:

....

0

....

1

Một dự trữ đặt trên các trang không có độ cuối, thứ hai đặt chân trang bình thường của bạn.

Đã trả lời ngày 28 tháng 7 năm 2015 lúc 23:58Jul 28, 2015 at 23:58

Tôi có một khuôn mặt như vấn đề này. Bạn có thể giải quyết vấn đề này bằng các thuộc tính CSS.

....

2

Lưu ý: Bạn không thể sử dụng thuộc tính này với các yếu tố trống hoặc hoàn toàn có vị trí. You can not use this property with empty or on absolutely positioned elements.

Đã trả lời ngày 26 tháng 9 lúc 4:21Sep 26 at 4:21

Tôi đã thử tất cả các đề xuất được đưa ra ở trên và tìm thấy giải pháp trình duyệt chéo đơn giản và làm việc cho vấn đề này. Không có phong cách hoặc phá vỡ trang cần thiết cho giải pháp này. Đối với giải pháp, định dạng của bảng nên giống như:

....

3

Định dạng trên được kiểm tra và làm việc trong các trình duyệt chéo

Neil

13.9k3 Huy hiệu vàng27 Huy hiệu bạc 50 Huy hiệu Đồng3 gold badges27 silver badges50 bronze badges

Đã trả lời ngày 13 tháng 3 năm 2017 lúc 6:42Mar 13, 2017 at 6:42

0

Câu trả lời được chấp nhận không hiệu quả với tôi trong tất cả các trình duyệt, nhưng sau CSS đã làm việc cho tôi:

....

4

Cấu trúc HTML là:

....

5

Trong trường hợp của tôi, có một số vấn đề bổ sung với

    

        

            
heading
        
        

            
notes
        
        

            
Long
cell
should'nt
be
cut
        
        

            
Long
cell
should'nt
be
cut
        
        
        

            
x
        
    
    

9, nhưng điều này đã giải quyết vấn đề ban đầu là giữ cho các hàng bảng không bị phá vỡ.

Vì các vấn đề tiêu đề, cuối cùng tôi đã kết thúc với:

....

6

Điều này không ngăn các hàng phá vỡ; Chỉ là nội dung của mỗi ô.

Đã trả lời ngày 1 tháng 4 năm 2015 lúc 19:20Apr 1, 2015 at 19:20

Vâng, các bạn ... hầu hết các giải pháp ở đây đã không làm việc. Vì vậy, đây là cách mọi thứ làm việc cho tôi ..

HTML

....

7

Bộ đầu đầu tiên được sử dụng như một hình nộm để không có đường viền trên cùng bị thiếu ở đầu thứ 2 (tức là đầu ban đầu) trong khi ngắt trang.

Đã trả lời ngày 6 tháng 7 năm 2017 lúc 7:41Jul 6, 2017 at 7:41

Làm cách nào để buộc một trang

Làm cách nào để dừng phá vỡ trang trong HTML?

Làm cách nào để ngăn một yếu tố in trên hai trang?