Как получить WYSIWYP (распечатать то, что вы видите) в веб-браузере?

В Chrome эта функция встроена в инструменты для разработчиков, но в очень неочевидном месте.

• Откройте Developer Tools (Windows: F12 или Ctrl+Shift+I, Mac: Cmd+Opt+I)
• Нажмите кнопку Customize and control DevTools hamburger menu button и выберите More tools > Rendering settings (или Rendering в более новых версиях).
• На закладке Rendering установите флажок Emulate print media и выберите тип носителя Screen.

В основном цитируется из этой ответ . Разница приведена ниже.

Теперь, когда вы печатаете, распечатка будет именно такой, какой вы видите. Убедитесь, что инструменты разработчика открыты до тех пор, пока вы не напечатаете. Как только вы закроете инструменты для разработчиков, настройка Rendering (Рендеринг) будет возвращена в нормальное состояние.

Примечание: Вдохновение для этого ответа пришло от https://superuser.com/a/568847/176146 . Но на самом деле текст этого ответа взят из lmeurs ’ answer . Это почти то же самое, но мы пытаемся сделать полную противоположность их ответа, поэтому вместо установки переопределения для Print установлено значение Screen.

Почему мои веб-страницы не печатают то, что я вижу в браузере?

Причина, по которой некоторые из ваших веб-страниц печатаются по-другому, заключается в том, что они имеют таблицу стилей печати **.

Что такое таблица стилей печати?

Печатная таблица стилей форматирует веб-страницу, поэтому при печати она автоматически печатается в удобном для пользователя формате. Таблицы стилей для печати существуют уже несколько лет и были написаны о многом. Тем не менее, так мало веб-сайтов реализуют их, а это означает, что у нас остались веб-страницы, которые, к сожалению, не печатаются на бумаге должным образом.

Примечательно, что так мало веб-сайтов используют печатные таблицы стилей:

• Таблицы стилей печати значительно улучшают удобство использования, особенно для страниц с большим содержанием (таких как эта!)
• Они феноменально быстры и просты в настройке

Некоторые сайты действительно предлагают ссылку на удобную для печати версию страницы, но это, конечно же, необходимо настроить и поддерживать. Для этого также необходимо, чтобы пользователи заметили эту ссылку на экране, а затем использовали ее перед тем, как регулярно печатать страницы (например, нажав на кнопку печати в верхней части экрана). Удобные для печати версии, однако, полезны при одновременной печати нескольких веб-страниц, например, статьи, охватывающей несколько веб-страниц.

Источник Отключить таблицу стилей печати (CSS) при печати веб-сайта

Как отключить таблицу стилей печати?

Недавно мне понадобилось получить снимок веб-сайта в точности так, как он отображается на моем экране. То есть, я хотел цвет фона, я хотел рекламу, я хотел полную верстку.

Один из вариантов - делать последовательные снимки экрана, когда вы прокручиваете страницу вниз, а затем соединяете их обратно в Photoshop. Это занимает много времени и оставляет вам изображение с низким разрешением (72dpi).

Другой способ сделать это - распечатать страницу, а затем “сохранить как” PDF вместо фактической печати. Это хорошо работает для страниц, которые не определяют другой макет для печати страницы по сравнению с просмотром страницы.

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

Я нашел только один вариант, который действительно отвечает моим потребностям: Дополнение / расширение “Веб разработчик”, разработанное Крисом Педериком.

С помощью этого плагина вы можете очень легко отключить ВСЕ стили, стили по умолчанию, встраиваемые стили, встроенные стили, и, как вы догадались, печатать стили!

В настоящее время он доступен для Firefox и Chrome. Я очень надеюсь, что когда-нибудь появится расширение Safari, так как я в основном использую Safari. Единственная опция, которую я нашёл для Safari - это отключение ВСЕХ стилей - функция, которая поставляется по умолчанию с последней версией (5.0.3) браузера. Это полезно во время разработки, чтобы увидеть, как будет выглядеть ваш сайт в текстовом браузере, но без возможности выбора стилей, которые вы отключаете, имеет ограниченную утилиту.

Вот пример отключения стилей печати с указанным выше расширением в Firefox:

Источник Таблица стилей печати - окончательное руководство

Решение без плагина для Firefox: Open Web Developer Tools, в меню Default Developer Tools (значок шестеренки) отметьте галочкой “Сделать скриншот всей страницы”. Вам нужно сделать эту часть только один раз.

Затем в разделе “Инструменты для разработчиков” щелкните значок камеры. Вся страница будет сохранена в формате .png. Отсюда вы можете распечатать ее, преобразовать в pdf и т.д.

Я использую расширение Chrome: Скриншот веб-страницы . С помощью двух щелчков мыши вся веб-страница преобразуется в jpg или pdf. Больше нет необходимости самостоятельно склеивать скриншоты. Эта страница выглядит так:

Я также столкнулся с подобной проблемой. В настоящее время я использую Print Friendly and PDF Extenstion for Chrome .

Лучшая функция заключается в том, что я могу вручную удалить элементы, которые мне не нужны в моем документе для печати/ PDF.

(Рискуя превратить это в набор ответов Рекомендации по программному обеспечению , но пока установка и использование расширения браузера X кажется единственным типом ответа, который на самом деле работает:)

В последнее время я использую для этой цели расширение Снимок открытого экрана Chrome, и я очень доволен этим. У него не было проблем с длинной страницей Quora .

_Обновление (ноябрь 2017): это уже не лучший вариант: Firefox и Chrome теперь поддерживают съемку полностраничных скриншотов в своих Developer Tools _.

Сегодня это можно сделать в Firefox (сейчас я использую 65.0.2) следующим образом:

1. Нажмите F12. Появится панель “Инструменты для разработчиков”.
2. Рядом с правым верхним углом находится значок камеры. Чтобы сделать скриншот всей страницы, нажмите на нее.

В Настройки (для доступа к ним щелкните по трем точкам справа от значка камеры) вы можете слегка изменить его поведение; по умолчанию скриншот будет сохранен в папке загрузки Firefox.

Если значок камеры отсутствует, сначала необходимо включить его в Settings.

Вот еще один под названием OpenScreenShoot . Мне нравится, потому что это Open source, доступный на GitHub, и он работал для меня на очень длинной веб-странице, на которой другие альтернативы, такие как WebpageScreenShot , провалились.