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

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

Однако это совсем не то, что происходит на многих сайтах. Они могут напечатать что-то совершенно другое. Я никогда не просил браузеры сделать это, и я не хочу, чтобы это произошло.

Есть ли способ получить то, что я хочу (кроме как снимать скриншоты, кропотливо вырезать и склеивать их, а также печатать полученные изображения)? Есть ли способ сказать веб-браузеру, который я использую (Firefox, Chrome, Safari, IE или Opera): «распечатать эту страницу так, как вы бы ее отображали в произвольно высоком окне браузера»?

(PS: см. Также: Печать из браузера с использованием CSS экрана ?)

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

• Откройте Инструменты разработчика (Windows: F12или Ctrl+ Shift+ I, Mac: Cmd+ Opt+ I)
• Нажмите кнопку меню « Настроить и контролировать» DevTools для гамбургеров и выберите « Другие инструменты»> «Настройки рендеринга» (или « Рендеринг в более новых версиях»).
• Установите флажок « Эмулировать материал для печати» на вкладке « Рендеринг » и выберите тип носителя для экрана .

Цитируется в основном из этого ответа . Смотрите ниже для разницы.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Таблица стилей Source Print - полное руководство

Решение без плагинов для Firefox: откройте Инструменты для веб-разработчиков, в разделе «Инструменты разработчика по умолчанию» (значок шестеренки) установите флажок «Сделать снимок экрана всей страницы». Вам нужно сделать эту часть только один раз.

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

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

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

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

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

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

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

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

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

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

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

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