Как найти версия для печати - Исправление недочетов и поиск решений вместе с Examum.ru

Идея статьи пришла из вопроса подписчика: «Как отпечатать текст на принтере? Значок принтера — на рабочем столе, а текст — на сайте «Компьютерная грамотность». Или как просто отпечатать текст на странице компа, где нет значка принтера ни на самой страничке, ни в файле странички, в общем, нигде, кроме как на рабочем столе моего компа, найти значок принтера не представляется возможным?»

Содержание:
1. Проще всего использовать горячие клавиши Ctrl+P
2. Правая кнопка мыши может помочь

3. Печать веб-страницы, используя буфер обмена и текстовый редактор
4. Как распечатать в текстовом редакторе Word

5. Печать содержимого веб-страницы через браузер
6. На некоторых сайтах есть кнопка (ссылка) для распечатки текста статьи

7. Сделать скриншот веб-страницы и распечатать его
8. Онлайн сервис для распечатки веб-страницы по ее URL адресу

Под веб-страницей будем понимать любую интернет-страницу на блоге или на сайте.

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

1) Самый простой способ – это использование горячих клавиш Ctrl+P

1. Включаем принтер.

2. Открываем страницу, которую нужно распечатать.

3. Нажимаем одновременно две клавиши Ctrl+P.
Регистр (латинский или русский) при нажатии клавиш не имеет значения. Но при этом важно, что буква «P» английская (от слова «Print», что значит «Печать»). Английская буква «P находится на одной клавише вместе с русской буквой «З».
Следует нажать клавишу Ctrl и, не отпуская ее, одновременно нажать на клавишу с английской буквой «P».

4. После нажатия на две горячие клавиши Ctrl+P появится диалоговое окно «Печать» и можно будет печатать.

Печать с помощью правой кнопки мыши

Если не использовать клавиатуру и горячие клавиши на ней, можно воспользоваться мышкой. Этот способ работает во многих браузерах, например, в Google Chrome, в Опере, в Яндекс.Браузере.

Принтер включили,
открываем в браузере ту веб-страничку, что хотим распечатать,
кликаем по ней ПКМ (правой кнопкой мыши),
в появившемся меню щелкаем «Печать».

Рис. 1. Кликнули правой кнопкой мыши по веб-странице, а в появившемся после этого меню щелкнули «Печать».

2) Используем буфер обмена и текстовый редактор

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

Для этого выделяем необходимую информацию (текст, рисунки, графики, ссылки) на веб-странице. Затем нажимаем горячие клавиши для копирования Ctrl+C. В результате выделенная информация попадает (копируется) в буфер обмена.

Если автор веб-страницы использовал специальные средства для запрета копирования информации, то на таком сайте горячие клавиши Ctrl+C не будут работать.

Теперь готовим плацдарм для принятия груза, точнее, для принятия информации, которую мы уже поместили в буфер обмена. Открываем текстовый редактор, например, MS Word и нажимаем горячие клавиши Ctrl+V. Если не использовать эти клавиши, то в верхнем меню редактора кликаем Правка – Вставить (в зависимости от версии Word, может быть кнопка Вставить).

Подведем итоги. Если пользоваться горячими клавишами, то после того как текст на веб-странице выделен – нажимаем Ctrl+C. Открываем текстовый редактор и нажимаем Ctrl+V (либо в верхнем меню редактора щелкаем Правка–Вставить).

Как распечатать в Word

Для этого в текстовом редакторе Word

кликаем в левом верхнем углу по меню Файл или по кнопке Office в зависимости от версии Word.
В открывшемся меню кликаем по опции Печать, появляется диалоговое окно Печать,
при необходимости задаем настройки и нажимаем OK.

На рисунке 2 кнопка Office для Word 2007 выглядит так:

Рис. 2. Печать в текстовом редакторе Word содержимого веб-страницы, которое предварительно помещено в редактор.

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

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

3) Распечатать веб-страницу можно через интернет-браузер

Это можно сделать с помощью кнопки в левом верхнем углу меню браузера.

Рис. 3 (кликните для увеличения). Печать веб-страницы через меню в браузере Google Chrome

Цифра 1 на рис. 3 — кнопка «Настройка и управление Google Chrome».
2 на рис. 3 — ссылка на «Печать» веб-страницы.

В других браузерах есть аналогичная кнопка, с помощью которой можно открыть настройки и найти ссылку «Печать».

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

Избежать этого можно так. Прежде чем выводить на принтер, сделать Предварительный просмотр и запомнить номера страниц, которые Вы хотите распечатать. Затем уже печатать только нужные номера страниц, а не всё подряд.

4) На некоторых сайтах есть возможность для распечатки текста статьи

На моем сайте такая кнопка есть в конце каждой статьи:

Рис. 4 (кликните для увеличения). Распечатать статью на сайте (то есть, распечатать веб-страницу).

Достаточно включить принтер и кликнуть по кнопке (точнее, по ссылке) «Распечатать статью» (рис. 4). После этого предоставляется возможность предварительного просмотра печати. Пролистав страницу предварительного просмотра, в самом конце внизу увидим ссылку для печати:

Рис. 5 (кликните для увеличения). Ссылка «Напечатать эту страницу» на сайте.

Кликаем по ссылке «Напечатать эту страницу» и должна пойти печать статьи.

5) Сделать скриншот веб-страницы и распечатать его

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

Как быть в этом случае, если надо сделать вывод на печать?

Могу предложить вариант сделать скриншот с помощью кнопки PrtSc (Print Screen),
поместить (вставить) скриншот, например, в графический редактор Paint или в текстовый редактор Word,
наконец, через меню Файл в текстовом или графическом редакторе распечатать его.

6) Онлайн-сервис в помощь

Рис. 6. Напечатать страницу по ее URL адресу через онлайн сервис

Можно использовать

онлайн-сервис для печати веб-страницы printwhatyoulike.com

Это бесплатный сервис, правда, на английском языке, который позволяет печатать веб-страницу по ее URL-адресу. URL-адрес этой страницы, где Вы читаете эти строки, имеет вид https://www.compgramotnost.ru/internet-gramotnost/4-sposoba-raspechatat-veb-stranicu. Он подчеркнут красной линией на рис. 5.

Чтобы распечатать веб-страницу на онлайн-сервис, нужно:

открыть в браузере нужную страницу на том или ином сайте. Тогда URL-адрес страницы можно скопировать в верхней строке браузера.
Затем следует вставить URL-адрес страницы на онлайн сервис (цифра 1 на рис. 6).
Отгадать капчу так, чтобы появилась зеленая галочка (2 на рис. 6). Это необходимо, чтобы доказать, что сервис использует живой человек, а не робот.
Нажать на кнопку Старт (3 на рис. 6).
Далее используя инструменты онлайн-сервиса, можно предварительно удалить с веб-страницы лишние элементы: рекламу, сайдбары и т.п.
Кликнуть на кнопку «Print» в онлайн-сервисе.

Видеоурок о 4 способах вывода на принтер веб-страницы можно посмотреть ниже

(звук включается в левом нижнем углу в окне просмотра видео):

Упражнение по компьютерной грамотности:

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

Буду рада Вашим комментариям и вопросам.

Дополнительные материалы:

1. Как сделать снимок экрана средствами Windows 7?

2. Скриншот веб-страницы одним нажатием

3. Картридж для принтера: заправить или купить?

4. Что такое 3D-принтер?

Статья впервые была опубликована 11 марта 2011 года.
Последнее обновление проведено 15 августа 2019 года.

Получайте новые статьи по компьютерной грамотности на ваш почтовый ящик:

Необходимо подтвердить подписку в своей почте. Спасибо!

Источник

Для начала создадим кнопку, например такую:

HTML
CSS

<span>Версия для печати</span>

</div>

.print-button {

display: inline-flex;

align-items: center;

border: 3px solid #BFE2FF;

border-radius: 22px;

padding: 6px 18px;

cursor: pointer;

transition: box-shadow 0.3s;

box-shadow: 0 2px 6px rgba(0,0,0,0.2), 0 8px 10px rgba(0,0,0,0.2);

margin: 20px;

}

.print-button svg {

fill: none;

stroke: #337AB7;

stroke-width: 2;

width: 30px;

height: 30px;

}

.print-button span {

color: #337AB7;

font-size: 18px;

line-height: 1;

font-family: Arial, sans-serif;

padding-left: 12px;

}

.print-button:hover {

box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);

}

Вариант с открытием всплывающего окна

В этом варианте мы создаем новый документ на основе текущего, открываем его в попапе и выдаем на печать.

Для этого смотрим HTML код нашей страницы и определяем элементы, которые нам нужно подать в это окно и далее на печать.

Для данной страницы, это:

Заголовок с классом subbanner
Краткое описание темы с классом entry-summary
Полное описание темы с классом entry-content
Подвал с копирайтом с ID footer

Затем вешаем клик на нашу кнопку, по которому передаем эти значения и добавляем статичные данные.

document.querySelector(«.print-button»).onclick = function() {

let w = window.open(»,»,‘left=50,top=50,width=860,height=600,toolbar=0,scrollbars=1,status=0’); // Создаем окно

let elem_1 = document.body.querySelectorAll(«.subbanner»)[0].outerHTML; // Берем заголовок

let elem_2 = document.body.querySelectorAll(«.entry-summary»)[0].outerHTML; // берем краткую часть темы

let elem_3 = document.body.querySelectorAll(«.entry-content»)[0].outerHTML; // берем полную часть темы

let elem_4 = document.getElementById(«footer»).outerHTML; // Берем подвал

// Заполняем новый документ, в котором добавляем все необходимые элементы, как статичные (стили, скрипты и т.д.), так и переданные из основного

w.document.write(‘<link href=»/css/all-stylesheets.css» rel=»stylesheet» type=»text/css» />’);

w.document.write(‘<link href=»/css/crayon.css» rel=»stylesheet» type=»text/css» />’);

w.document.write(elem_1);

w.document.write(elem_2);

w.document.write(elem_3);

w.document.write(elem_4);

w.document.write(‘<script src=»/js/javaup.js»></script>’);

w.document.write(‘<script src=»/js/javadown.js»></script>’);

w.document.write(‘<script src=»/js/crayon.min.js»></script>’);

w.document.write(‘<link href=»/css/awesome.css» rel=»stylesheet» type=»text/css» />’);

w.document.close();

setTimeout(function () {

w.print();

}, 500);

w.onfocus = function () {

setTimeout(function () {

w.close();

}, 500);

}

};

А результатом будет это:

Похожим способом можно выдавать на печать несколько разных элементов сайта, например, тарифов, контактов и т.д..

Про это будет позже в другой теме.

Вариант с изменением самого документа

Тут мы будем по клику добавлять к тегу body класс print, включая тем самым версию для печати. Выключаться она будет по нажатию на клавишу Esc

Этот вариант хорош тем, что можно изменить документ не только для печати, но и для сохранения.

Как и в первом смотрим HTML код нашей страницы, но определяем элементы, которые нам нужно убрать (шапка, подвал, боковая панель, рекламные блоки и т.д.) или изменить (ширину центрального блока и т.д.).

Код для этой будет такой:

JS
CSS

document.querySelector(«.print-button»).onclick = function() {

document.body.classList.add(«print»);

window.print();

};

document.addEventListener(‘keydown’, function(e) {

if (e.keyCode === 27) {

document.body.classList.remove(«print»);

}

});

body.print #header,

body.print .sidebar-block,

body.print .execphpwidget,

body.print .post-thumbnail,

body.print .title.margin-top-30,

body.print .linehover,

body.print .comment-respond,

body.print .subbanner2,

body.print .post-meta,

body.print .artlinks {

display: none;

}

body.print .col-lg-8 {

width: 100%;

}

А результат:

Если нет необходимости показывать все это на странице, то просто добавляем нужные стили в свое CSS и включаем печать по кнопке.

JS
CSS

document.querySelector(«.print-button»).onclick = function() {

window.print();

};

@media print {

#header,

.sidebar-block,

.execphpwidget,

.post-thumbnail,

.title.margin-top-30,

.linehover,

.comment-respond,

.subbanner2,

.post-meta,

.artlinks {

display: none;

}

.col-lg-8 {

width: 100%;

}

Выглядит так:

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

Источник

Время на прочтение
3 мин

Количество просмотров 162K

На многих сайтах есть возможность отобразить версию страницы для печати, но всегда ли удобно ими пользоваться?

Основными проблемами при распечатке документа становится плохая типографика, наличие лишней информации (например, элементы интерфейса) и неправильные цвета. Для стилизации можно использовать правило @media:

@media print {
}

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

h1, div#header, div#sidebar, div#footer { display: none; }

Правила страницы для печати

1. Современные браузеры умеют удалять фоновое изображение. Однако желательно добавлять background-image: none, чтобы старые браузеры тоже умели это.

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

3. При помощи следующего кода можно отображать полный URL вместо гиперссылки, ведь на листе бумаги не получится кликнуть:

a:after {content:" <" attr(href) ">";

Немного модифицировав код, можно добавить отображение URL только внешним ссылкам:

a[href^=http]:after {content:" <" attr(href) ">";

4. Для больших текстов иногда будет уместно разделение на части. Следующий код разбивает контент на каждом заголовке H3, печатая на новой странице:

h3 { page-break-before: always; }

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

article + article { page-break-before: always; }

5. Желательно переназначить стили сайтов с темным или ярким дизайном в стандартную цветовую схему — черный текст на белом фоне. Это удобно и для читабельности, и для экономии расходнвх материалов в принтере пользователя.

Корректное отображение

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

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

Как это выглядит в действии:

Качество печати

Зачастую результат печати сильно отличается от исходного на экране в худшую сторону. Одну из частых причин этого разберем на простом примере. Есть светлый текст на темном фоне:

Со следующим CSS:

header { background: #000; color: #fff; padding: 1rem;
font-family: Avenir, Arial, sans-serif; }

Браузер попытается привести версию для печати в нормальный вид:

Если на странице есть изображение, например логотип, то браузер его никак не корректирует, и получается ужасно:

Еще хуже все выглядит, если в качестве лого используется векторное изображение с прозрачностью:

Избежать этого ужаса можно при использовании CSS3 Filter:

@media print  {
header { background: none; color: #000; }
header img { -webkit-filter: invert(100%);
filter: invert(100%); }
}

Получается:

Для Firefox можно использовать SVG:

<svg xmlns="http://www.w3.org/2000/svg"> 
        <filter id="negative"> 
            <feColorMatrix values="-1  0 0 0 1 
                                    0 -1 0 0 1 
                                    0 0 -1 0 1 
                                    0 0 0 1 0" /> 
        </filter> 
      </svg>

CSS:

@media print  {
header { background: none; color: #000; }
header img { filter: url(inverse.svg#negative);
-webkit-filter: invert(100%); filter: invert(100%); }
}

Для IE9 решение от Lea Verou:

<!--[if IE 9]>
      <style>
      @media print { 
            header:after { content:""; display: block;
   height: 1px; width: 1px; position: absolute; top: 100px; right: 100px; 
   outline: 100px solid invert; } 
      }
      </style>
   <![endif]-->

Использованные материалы:

Writing CSS For Print Stylesheets
Force Accurate Colors When Printing Web Pages
Create Quality Print Versions of Web Pages With CSS3 Filters

Источник

Серёжа СыроежкинКопирайтер

10.06.2015

Как сделать версию для печати

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

Конечно, самый простой способ решения данной проблемы — отдельная версия для печати для сайта. В таком случае создается новая страница, с которой удаляются все ненужные для печати элементы и страница подгоняется под формат A4 (или несколько листов A4).

Другой способ — создание стилей сайта для печати. Для этого создается отдельный файл CSS версии для печати. Подключается он между тегами <head></head> следующей строкой:

<link rel="stylesheet" type="text/css" media="print" href="nubexPrint.css">

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

Чтобы скрыть определенные элементы со страницы при печати можно использовать следующий приём:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Страница с версией для печати - "Нубекс"</title>
  <link rel="stylesheet" type="text/css" href="nubex.css">
  <link rel="stylesheet" type="text/css" media="print" href="nubexPrint.css">
 </head>
 <body>
  <div id="logo"></div>
  <div id="menu" class="noprint"></div>
  <div id="add1" class="noprint"></div>
  <div id="content"></div>
  <div id="add2" class="noprint"></div>
  <div id="footer"></div>
 </body>
</html>

Содержание файла nubexPrint.css следующее:

.noprint {display: none !important;}

То есть элементам, которые необходимо скрыть при печати, присваивается класс noprint, который описан в файле nubexPrint.css (отображение запрещено).

В приведенном примере будет распечатана страница с логотипом сайта, основным контентом и блоком контактов в подвале. Меню сайта и рекламные блоки распечатаны не будут.

В конструкторе сайтов «Нубекс» есть версия страниц для печати.

Смотрите также:

Источник

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

1. Можно воспользоваться кнопкой «Версия для печати«, которая размещена на многих сайтах. Обычно она располагается внизу страницы или статьи. При нажатии на нее вызывается окно печати, где производятся необходимые настройки.

2. Печать страницы возможна напрямую из браузера. В зависимости от того, каким Интернет-браузером вы пользуетесь, необходимо отыскать кнопку «Печать». Например, в браузере Chrome нужно нажать кнопку «Настройка и управление», обозначенную в виде гаечного ключа, а затем выбрать пункт «Печать». Откроется окно печати, в котором можно выбрать номера страниц, количество печатаемых копий, ориентацию страницы, цветность и наличие колонтитулов. После окончания настройки нажимается соответствующая кнопка и документ печатается.

3. Можно скопировать материал со страницы, затем вставить его в какой-то текстовый редактор, например, Word, отредактировать его, удалив ненужные элементы, а затем распечатать средствами редактора. Это самый трудоемкий способ, но он же и самый популярный, так как позволяет напечатать только то, что нужно, отбросив все лишнее.

4. Существует онлайн-ресурс, позволяющий производить печать нужных страниц. Для того чтобы распечатать нужную страницу, перейдите по адресу printsetup.ru. При этом появится окно, где нужно вставить адрес выбранной страницы и нажать кнопку «Начать». Откроется выбранная страница. На ней будет присутствовать множество информации, включая картинки и рекламные блоки. Для того чтобы распечатать только основной текст страницы, нажмите кнопку «Автоформат». Появившийся текст нужно вывести на печать. Можно самостоятельно выбрать блоки или участки текста для печати. Выбрав нужный блок, следует нажать кнопку «Импортировать». Можно удалять ненужные участки и блоки. Для этого, щелкнув по блоку, нужно выбрать пункт «Удалить». После окончания редактирования можно сохранить выбранный текст в нужном формате или вывести его на печать. Есть возможность скачать расширение для браузера и сэкономить время на редактирование страниц сайта. Сервис, однако, не работает в том случае, если на сайте стоит защита от копирования. В таком случае напечатать такую страницу можно лишь так, как указано в пункте 5.

5. Можно быстро напечатать Интернет-страницу при помощи нажатия всего двух клавиш — Ctrl+P. Но на ней сохранятся все рисунки, реклама и комментарии. Нажав сочетание «Ctrl+Shift+P», можно вызвать привычное, системное окно печати, в котором и распечатать страницу.

08 июля 2012,

29879

Комментировать

Источник