Xem trước bản in trên Chrome khác với trong DEVTools

Tôi đã thiết lập biểu định kiểu in và trong firefox có vẻ tốt.Xem trước bản in trên Chrome khác với trong DEVTools

Trong Chrome toàn bộ trang được chia trong bản xem trước in (Ctrl + P), nhưng nếu tôi mở DevTools Chrome (F12) và sử dụng các chức năng emulate CSS media trang có vẻ đúng - như trong firefox.

Điều kỳ lạ là, nếu tôi mở lại bản xem trước bản in, sau khi tôi đã kích hoạt tùy chọn mô phỏng một lần, trang sẽ hiển thị chính xác trong bản xem trước bản in! Ngay cả khi tôi chỉ kích hoạt và sau đó tắt tùy chọn mô phỏng, bản xem trước bản in luôn chính xác sau khi thực hiện điều đó!

print.css của tôi bắt đầu với

@media print { ... }

và được bao gồm trong trang <head> như thế này:

<link rel="stylesheet" type="text/css" href="print.css" media="print">

tôi đã cố gắng để loại bỏ các media="print" nhưng không thay đổi.

Nguồn

2014-09-24 Keith L.

Trong style sheet in của bạn, bạn cần phải làm thêm những điều sau đây:

*{transition:none!important}

Dường như Chrome không vô hiệu hóa tài sản chuyển tiếp cho phương tiện truyền thông in ấn.

Here là nơi tôi tìm thấy câu trả lời.

Nguồn

2015-01-19 21:36:28 Ustice

Chỉ để in phương tiện, tôi đã thêm kiểu này. Nếu chúng ta áp dụng css này chung, điều này làm việc.Nếu chúng tôi chỉ áp dụng cho phương tiện in, thì điều này không hoạt động. Có bất kỳ công việc arround? :-( –

@JeevaJsb - Tôi đã gặp phải vấn đề tương tự. Xem câu trả lời của tôi để biết cách giải quyết có thể xảy ra. –

Để thêm vào câu trả lời của Ustice và nhận xét của Jeeva Jsb: bạn có thể cần cho phép DOM lập lại sau khi áp dụng quy tắc transition: none !important. Tôi thực hiện điều này bằng cách thêm một lớp print CSS cho cơ thể trước khi tôi lập trình in the page:

CSS:

body.print * { 
    transition: none !important; 
}

JS (sử dụng jQuery):

$('body').addClass('print'); 
setTimeout(function() { 
    window.print(); 
}, 0);

Đừng quên xóa lớp print sau khi người dùng của bạn đã in xong trang. (Xem how to detect window.print() finish.)

Nguồn

2016-09-22 14:02:00

Tôi đã gặp phải vấn đề đứt đầu chính xác và tôi đã có thể khắc phục sự cố.

Trong trường hợp của tôi, sự cố là do sử dụng phông chữ @ tùy chỉnh cho CSS 'in' mà tôi không sử dụng trong CSS 'màn hình'.

Dường như trình duyệt không tải khuôn mặt @ phông chữ tùy chỉnh từ biểu định kiểu in cho bản xem trước đầu tiên và hiển thị trang nhiều hơn hoặc ít hơn trống. Nó sẽ hiển thị hoàn hảo trên bản xem trước bản in thứ hai.

Giải pháp của tôi là tải cùng quy tắc @ phông mặt từ css pint cũng trong css màn hình. Bằng cách đó, phông chữ được tải bởi trình duyệt khi xem bản xem trước bản in và tất cả đều hoạt động như một nét duyên dáng.

Nguồn

2017-01-30 09:43:04

Xem trước bản in trên Chrome khác với trong DEVTools

Trả lời

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