In chân trang trên mọi trang được in từ trang web, trên tất cả các trình duyệt (Chrome)

Kính gửi tất cả, tôi đã thử CSS Vị trí: Tài sản cố định nhưng nó hoạt động bình thường trên Firefox và IE (hack cho IE6), nhưng nó không hoạt động Chrome. Tôi nghĩ Chrome là người mới nhất sẽ hỗ trợ nó rất dễ dàng nhưng vẫn không phải vậy. Tôi đã thử ra < thead>, < tfoot> < tbody> lại hoạt động trong IE và Firefox, nhưng có vấn đề trong Chrome. Xin vui lòng bất kỳ ai có một giải pháp thay thế cho nó.In chân trang trên mọi trang được in từ trang web, trên tất cả các trình duyệt (Chrome)

Nguồn

2010-09-21 Sagar Kadam

Xin chào! Tôi cũng gặp phải vấn đề này. Có vẻ như chrome xử lý vị trí in: cố định khác với tất cả các vị trí khác. Chết tiệt ... Sẽ đào sâu hơn vào cái này. – mtness

-9

Đây là mã tôi sử dụng. Lưu ý tôi thiết lập cả html và chiều cao cơ thể đến 100%.

@media print { 
    html, body { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    } 
    #footer { 
    position: absolute; 
    bottom: 0; 
    } 
}

Nguồn

2012-08-15 05:13:43 tim

Điều này không giải quyết được vấn đề gì cả. Nó sẽ làm cho chân trang được in trên trang cuối cùng mà thôi. Nó thậm chí phanh nó trong các trình duyệt làm việc với vị trí cố định. –

Có vẻ như Chrome [webkit] có cách xử lý vị trí khác nhau: được khắc phục trong bảng định kiểu in so với phần còn lại của trình duyệt.

Vì vậy, câu trả lời hiện tại cho câu hỏi này là:
Không có giải pháp thích hợp cho điều này trong Chrome.

Trong khi FF và IE hiển thị trên mọi trang, Opera không hiển thị gì cả và trình duyệt webkit chỉ hiển thị trên trang đầu tiên.

nhỏ tập tin thử nghiệm:

<!DOCTYPE HTML> 
 
    <html lang="en-US"> 
 
    <head> 
 
    \t <meta charset="UTF-8"> 
 
    \t <title>print css test by mtness</title> 
 
    \t <style type="text/css"> 
 
    \t @media print { 
 
    \t \t #watermark { 
 
    \t \t \t display: block; 
 
    \t \t \t position: fixed; 
 
    \t \t \t top: 0; 
 
    \t \t \t right: 0; 
 
    \t \t \t z-index: 5; 
 
    \t \t } 
 
    
 
    \t \t p { 
 
    \t \t \t position: relative; 
 
    \t \t \t top: 40pt; 
 
    \t \t \t display: block; 
 
    \t \t \t page-break-after: always; 
 
    \t \t \t z-index: 0; 
 
    \t \t } 
 
    \t } 
 
    \t </style> 
 
    </head> 
 
    <body> 
 
    \t <div id="watermark">AWESOME!</div> 
 
    \t <p>page1</p> 
 
    \t <p>page2</p> 
 
    \t <p>page3</p> 
 
    </body> 
 
    </html>

nguồn lực hơn nữa có thể được tìm thấy ở đây:
http://room118solutions.com/2011/03/31/styling-print-headers-and-footers-with-css/
http://css-discuss.incutio.com/wiki/Printing_Headers
http://www.andypemberton.com/css/print-watermarks-with-css/

trang kiểm tra:
http://www.andypemberton.com/sandbox/watermark/

HTH. Trân trọng, mtness.

Nguồn

2011-05-04 15:56:21 mtness

Tính đến tháng 6 năm 2015, điều này vẫn đúng với chrome. – mtness

Xem câu trả lời của tôi bên dưới để biết giải pháp có thể cập nhật cho vấn đề này, @mtness – lastmjs

[Lặp lại tiêu đề bảng trên trang đã in] (https://bugs.chromium.org/p/chromium/issues/detail?id=24826) đã được khắc phục trên Chrome vào ngày 5 tháng 6 năm 2016. Tôi có phiên bản 51.0.2704.103 trên Mac OS X và nó hoạt động. – Ricardo

Chỉnh sửa: Rõ ràng lỗi đã được sửa, vì vậy thư viện tôi chia sẻ bên dưới có thể không còn được sử dụng nữa.

Từ tất cả các nghiên cứu của tôi, chính xác là không có cách nào để có được vị trí: cố định để hoạt động trong Chrome. Đây là liên kết đến số bug trên trang dự án Chromium.

Trong thời gian chờ đợi, tôi đã tạo một dự án mã nguồn mở cho phép bạn in đầu trang và chân trang trong Chrome. Đó là vào đầu năm phát triển nhưng nó hoạt động, tùy thuộc vào cấu trúc của layout html của bạn:

https://github.com/byuarchdi/print-headers-and-footers

Đó là một tiến bộ công việc theo, và nó dựa chủ yếu trên CSS Regions Polyfill. Nhưng tôi đang sử dụng các kỹ thuật trong thư viện này để có hiệu quả rất tốt đối với một dự án tại nơi làm việc.

Nguồn

2015-12-23 22:52:27 lastmjs

Lỗi đã được đánh dấu là cố định vào tháng 4 năm 2016. –

Nó đã được sửa chữa trong một thời gian, dường như nó lại bị hỏng ... ít nhất là trong webview của Android. Rất lạ. – fattire

Trong Chrome, tôi luôn nhận được "Không bắt buộc (lời hứa) LoạiError: document.getNamedFlow không phải là chức năng" ngay cả trong ví dụ của bạn – Ruwen

Tôi đã hoàn thành việc sử dụng bảng, nhưng chỉ cho tiêu đề trong chrome. Tôi đã đặt nội dung lặp lại trên thẻ thead và nội dung trang trong tbody, do đó trình duyệt đã hiểu chính xác.

Tuy nhiên, tôi đã gặp lỗi trong nội dung lớn HTML. Trong một số trường hợp, nội dung chồng chéo tiêu đề. Trong ngày mà tôi đăng bài này, vẫn không tìm thấy một giải pháp.

When printing tables in Google Chrome, content overlaps header

Nguồn

2017-08-10 19:22:18

In chân trang trên mọi trang được in từ trang web, trên tất cả các trình duyệt (Chrome)

Trả lời

Các vấn đề liên quan