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

Question

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

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

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

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

Answer 1

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

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

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

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

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

Answer 2

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

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

---

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

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

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

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

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

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

---

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

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

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

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

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

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

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

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

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

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

Answer 3

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

Answer 4

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

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

Answer 5

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

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

Answer 6

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

Answer 7

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

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

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