Добавление CSS в печать Google Chrome по умолчанию

Question

Я печатаю страницу моего PHP-приложения с помощью (ctrl + P) (печать по умолчанию). Как я могу убедиться, что CSS (таблицы, отступы, пробел, фоновое изображение с непрозрачностью) напечатаны на листе? Я звоню CSS из другого файла.

Спасибо за вашу помощь и время.

Answer 1

Вы должны добавить это

html{-webkit-print-color-adjust:exact;}

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

Answer 2

Добавьте это на свою HTML-страницу.Теперь вам нужно настроить страницу вручную, чтобы подогнать ее под страницу печати.( используйте функцию предварительного просмотра в Chrome )

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

Интересная часть для браузера: media=print

---

Вы можете найти еще несколько стилевых команд дляпечать веб-страниц здесь:

• Инструкции по CSS: оптимизация страниц для печати с использованием CSS
• Печать книги с помощью CSS: Boom!
• полное руководство по CSS - Печать
• Ностраничный носитель CSS - @page Rule

Answer 3

Вам нужно будет включить таблицу стилей печати, как , детально описанную Дэном Ли . Однако это только половина ответа. Другая половина заключается в том, что Chrome (и Safari) имеют плохие параметры печати и не могут печатать background-images или background-colors. Мне пришлось все это понять, когда я пытался создать версию для печати FullCalendar , в которой использовались цвета для различения разных типов записей календаря.

Я включил эти указания для печати:

1. У Firefox лучший вывод на печать, Internet Explorer - на втором месте.
2. Вы можете включить опцию «Печать фона» в своем браузере: в Firefox или Internet Explorer: выберите «Файл» -> «Параметры страницы» -> «Проверить фон печати (цвета и изображения)»
3. Хотя Chrome и Safari будут работать, они не имеют параметров фона печати. Будет сложно различить типы записей в календаре.

Если ваша страница достаточно проста, вы можете вместо этого ввести фактические значения <img> с и использовать CSS, чтобы растянуть и расположить их за любым текстом, который может быть в div или td. Это было невозможно для проекта FullCalendar, который я сделал, но он отлично работает на более простом столе. Он совместим с Chrome, Firefox и IE и не требует от пользователей переключения определенной опции для получения правильного вывода.

Это по состоянию на Chrome 17.0.963.83 и Safari 5.1.4 на Windows.