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

70

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

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

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

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

reinierpost
источник
1
возможный дубликат печати из браузера с помощью экрана CSS?
Ƭᴇcʜιᴇ007
Расширение Chrome «Приложение для захвата экрана Nimbus» позволяет получать изображение всей веб-страницы, как показано на экране (включая ту часть, которую вы не видите без прокрутки). Т.е. как будто вы сделали серию скриншотов и соединили их вместе, но это всего лишь одно нажатие кнопки.
AE
1
Таблицы стилей печати в основном полезны. Например, когда я печатаю эту страницу, мне нужны вопрос и ответы или мне также нужен заголовок, связанный вопрос и нижний колонтитул? Буду также признателен за то, что все комментарии видны. Веб-сайты являются интерактивными, бумажки - нет (большую часть времени), и эти таблицы стилей могут помочь сосредоточиться на контенте, экономя ваши чернила и бумагу.
SBoss
1
@SBoss: Не все, кто печатает страницу, будут интересоваться одними и теми же вещами. Я бы предложил, чтобы страница, удобная для печати, позволяла пользователю выбирать, какие вещи печатать, и чтобы версия для печати соответствовала экранной версии, за исключением - как правило - элементов управления, которые показывают, что будет печататься (должна быть опция включить и отключить их в распечатках, но они все равно должны появляться на экране).
суперкат
1
Что касается вопроса, являющегося дубликатом: я попытался удалить таблицу стилей печати перед печатью, и она не работает, поэтому я не думаю, что вопрос является дубликатом.
reinierpost

Ответы:

37

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

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

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

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

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

Вениамин
источник
Firefox получил эту функцию и в прошлом году. Это явно лучше, но должен ли я принять старый ответ по этой причине?
reinierpost
@reinierpost это, конечно, зависит от вас. Но следующее может быть полезным в вашем решении - meta.stackexchange.com/q/93969/226780
Бенджамин
Спасибо; в этих ответах говорится, что я должен измениться, поэтому я сделаю это, даже несмотря на то, что ранее принятый ответ, по-видимому, был наиболее полезным из возможных на момент его написания.
reinierpost
Прямо сейчас, когда я пытаюсь сделать это в Chrome, я вижу опцию, только когда она находится в режиме мобильного просмотра; Я не могу получить его для обычного просмотра страницы на рабочем столе.
сообщение
Firefox также обладает этой способностью, но по-другому. Я полагаю, что отдельный документ должен документировать это. Я не уверен насчет других браузеров.
reinierpost
22

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

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


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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

введите описание изображения здесь

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

ДэвидПостилл
источник
2
Спасибо, но это не помогает сайту, на котором я его пробовал (trelloprinter.com). Я поражен, как эти люди имеют смелость написать «разочаровывающе, что многие веб-сайты их не реализуют», когда они принципиально нарушают подход к проблеме, которую пытаются решить. Наличие отдельных таблиц стилей для печати означает, что вы потерпели неудачу в дизайне пользовательского интерфейса 101 или вообще никогда его не брали.
reinierpost
1
Возможно, ScreenshotCaptor будет делать то, что вам нужно для достижения ... среди прочего он будет захватывать прокручивающиеся регионы ... но я помню, что он не слишком хорошо работает с Google Maps.
DavidPostill
1
Это не сильно поможет. Если вы используете IE (я знаю, сохраните ваши камни для дальнейшего использования), вы можете использовать Greenshot ( getgreenshot.org ), у которого есть возможность прокрутить страницу IE и сделать ее печать. Он соберет всю страницу в 1 скриншот. Затем вы можете отредактировать его по своему желанию.
Исмаэль Мигель
18
@reinierpost «Наличие отдельных таблиц стилей для печати означает, что вы потерпели неудачу при разработке пользовательского интерфейса 101» - это очень широкая кисть, которую вы рисуете там. Вы говорите мне, что если вы распечатали эту страницу, вы бы хотели, чтобы у вас были Горячие сетевые вопросы или информация о чатах? Некоторые части страницы полезны только в интерактивном контексте - зачем тратить место и печатать их чернилами?
Крис Хейс
4
@reinierpost Какое нелепое утверждение. Предположим, у сайта темный фон со светлым передним планом. Я не буду говорить за вас, но лично я рад, что браузер имеет свои собственные стили печати, а также множество сайтов, так что я не теряю все свои чернила при печати. Существует множество причин, по которым вы хотите печатать сам контент, а не скриншот.
Брэд
9

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

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

Russ
источник
Вау .. это именно то , что я искал. Спасибо!
reinierpost
4
Эта функция больше не требует инструментов разработчика! В правой части адресной строки выберите три точки, нажмите «Сделать снимок экрана», затем выберите «Сохранить полную страницу».
номер
Это потрясающе, спасибо!
codingjeremy
8

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

Ruut
источник
1
Похоже, это тоже работает. Я надеялся, что PDF даст мне масштабируемую графику, но это всего лишь растровое изображение.
reinierpost
1
Какой замечательный способ доказать свой ответ! :) Я бы принял это как ответ ..
Виджай Чавда
Удивительное продолжение! Кажется, для создания PDF в ландшафтном режиме. Можно ли создать PDF в портретном режиме? @reinierpost
user674669
3

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

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

Нихилу
источник
Интересно ... в Firefox я использую букмарклет PrintWhatYouLike для этой цели. Он работает хорошо, но не обрабатывает «бесконечную» прокрутку (например, Quora) - и это расширение не работает.
reinierpost
Хороший совет - спасибо! По умолчанию он сохраняет текст в виде текста, ссылки в виде ссылок и показывает изображения в полном размере. 6-страничная статья о путешествиях с несколькими большими изображениями теперь является безупречным документом PDF объемом 500 КБ.
Майк Хани
1

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

Виджай Чавда
источник
Я думаю, что вы хотели сказать «скриншот веб-страницы в 1 клик» вместо «Открыть скриншот». Правильно?
user674669
1

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

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

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

reinierpost
источник
Я думаю, что вы хотели сказать «скриншот веб-страницы в 1 клик» вместо «Открыть скриншот». Правильно?
user674669
По-видимому, они переименовали себя. Я не уверен, что делать с этим ответом.
reinierpost
1

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

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

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

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

Инструмент для создания скриншотов в Firefox Developer Tools

reinierpost
источник