Предварительный просмотр печати в Chrome отличается от предварительного просмотра в DEVTools

Я создал таблицу стилей печати, а в firefox это выглядит хорошо.

В Chrome вся страница разбита на предварительный просмотр печати (CTRL + P), но если я открою Chrome DEVTools (F12) и использую функцию emulate CSS media, страница выглядит правильно - например, в firefox.

Странно, если я снова открою предварительный просмотр печати, после того как я активировал параметр эмулирования один раз, страница будет выглядеть правильно в предпросмотре печати! Даже если я просто активирую и затем деактивирую опцию эмулирования, предварительный просмотр печати всегда корректен после этого!

My print.css начинается с

@media print { ... }

и включен в страницу <head> следующим образом:

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

Я попытался удалить media="print", но ничего не изменилось.

Ответы

Ответ 1

В свою таблицу стилей печати вам нужно добавить следующее:

* {
    transition: none !important;
}

Похоже, что Chrome не отключает свойство перехода для печатных СМИ.

Вот где я нашел ответ.

Ответ 2

Я столкнулся с одной и той же проблемой с разбивкой головы, и я смог ее исправить.

В моем случае проблема была вызвана использованием пользовательского шрифта @font-face для "печатного" CSS, который я не использовал в CSS экрана.

Казалось, браузер не загружает пользовательский шрифт @font-face из таблицы стилей печати для первого предварительного просмотра и делает страницу более или менее пустой. Это отлично отразится на втором предварительном просмотре.

Моим решением было загрузить одно и то же правило @font-face из пинты css также на экране css. Таким образом, шрифт загружается уже браузером при просмотре предварительного просмотра, и все это работает как шарм.

Ответ 3

Если вы не нашли решения в данных ответах, то мне есть, что сказать по этому поводу:

в Chrome DEVTools опция print в emulation css media предназначена только для применения правил печати css к странице, для целей тестирования, она не учитывает все другие вещи, которые идут вместе с печатью, она отображает предварительный просмотр печати, но иногда она не отображается страница печати как фактический предварительный просмотр.

если вы используете bootstrap, то если вы используете только col-md-* или col-sm-* это не будет работать, но если вы используете col-xs-* то это будет работать, потому что проблема в том, что сама страница мала с точки зрения пикселей, поэтому bootstrap считает, что необходимо применить стиль xs.

И разные браузеры ведут себя по-разному при печати страницы. Единственный оптимальный способ проверить печать - это на самом деле печать или печать в PDF.

Ответ 4

Чтобы добавить к ответу Ustice и комментарий Jeeva Jsb: вам может потребоваться перезапустить DOM после применения правила transition: none !important. Я выполнил это, добавив класс print CSS в тело, прежде чем я программно распечатал страницу:

CSS

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

JS (с использованием jQuery):

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

Не забудьте удалить класс print, как только пользователь завершит печать страницы. (См. как обнаружить window.print() закончить.)