0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

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

Делаем версию для печати

Есть два способа делать страницу для печати:

1. Специально выводить отдельным скриптом страницу без меню и лишнего оформления.

2. Выводить ту же страницу, которую просматриваем при просмотре сайта, но уже с другими подкреплёнными стилями, где скрываются ненужные элементы.

Довелось делать документы(накладные, счёт фактура и прочее) для печати. Так что пошёл по первому варианту. Но это просто в моём случае. Более гибкий как мне представляется второй вариант.

Вот мой опыт, заметки:

1. Главное правило — будь проще и люди к тебе потянутся(с)хз кто. Короче не используйте разнообразие оформления. Человеку просто надо прочитать распечатанный текст, нечего его грузить лишним оформлением. Да и краску в принтере тратить.

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

3. Стараемся использовать белый фон, чёрный текст. Если обратно, то будет тратиться много краски. Цветной текст думаю не нужно делать — всё равно у многих чёрно-белый принтер.

4. Если нужно чтобы следующий контент печатался обязательно на следующей странице, вставляем блок div с классом pagebreak перед этим текстом. Описываем класс в стилях:

текст за этим блоком будет распечатываться уже на новой странице. Работает во всех современных браузерах. Да и не современных то же. Один IE до 7ой версии включительно подводит. Но на него надо забивать!

5. И так, печать. Пользователь можно сам выбрать печать. Можно поставить на

Чтобы окно печати открывалось при открытии страницы. Но надо же пользователю сначала посмотреть страницу. Поэтому для удобства и для полуавтоматизации процесса делаем на странице кнопку для печати

Это кнопка будет при просмотре страницы, но печататься не будет, так как мы задали display: none; в style для media=»print», то есть в стилях для печатающего устройства. При нажатии на кнопку будет выводиться окно печати.

Тем, кто хочет супер автоматизировать процесс печати, чтобы например открываем страницу и принтер сразу начал печатать страницу — охладите свой пыл или того, кто вас просит это сделать. Я этот способ не нашёл. Да его и нет. Потому что это логично. Представьте, заходите вы на сайт, а там через javascript запрограммлена печать ста копий страниц. И принтер приходит в бешенство и начинает печатать эту кучу страниц без вашего ведома. Нелогично? Нелогично!

В одно время меня усердно просил сделать такую штуку один менеджер проектов. Пришлось ему всё это обяснять, приводить примеры, чтобы он понял что это нельзя сделать, да и не нужно.
6. Если кто то будет жаловать на то, что распечатываются адрес страницы, title и прочая херь в колонтитулах — посоветуйте ему настроить свой браузер. Со стороны сайта это не настраивается. По крайней мере я не знаю как. Например в Firefox это настраивается в «Печать» — «Параметры страницы» — «Поля и колонтитулы»

Читать еще:  Гороховый суп с чесночными рулетиками

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

8. Используйте крупный размер шрифт(в пределах разумного конечно). Главное чтобы при печати всё было читабельно.

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

10. Думаю нужно использовать размерности, независимые от устройства — абсолютные размерности. Например in,cm,mm,pt,pc.

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

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

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

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

Итак, Вы уже поняли, что версию для печати Вам надо создавать самостоятельно, выводя ровно то, что нужно пользователю. Теперь о том, как это сделать.

Есть 2 варианта: создать отдельную страницу и создать отдельный файл стилей. Первый вариант, думаю, понятен. Создаёте ещё одну страницу с версией для печати и на основной странице даёте ссылку на эту печатную версию. Пользователь по ней переходит и через «Файл»->»Печать» он её распечатает.

Второй вариант подразумевает создание отдельной таблицы стилей, где Вы скроете все лишние блоки (через display: none;) и поставите соответствующие размеры у выводимого контента. Дальше такой файл стилей подключается следующим образом:

Теперь если пользователь захочет распечатать эту страницу, то распечатается не то, что он видит, а то, что прописано в print.css. Фактически, пользователь видит страницу в одном виде, а принтер в совсем другом.

Вот таким образом создаётся версия для печати любой страницы сайта.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Читать еще:  Салат "Все очень просто"

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 2 ):

    мало информации, а можно записать видео урок или подробно описать ?

    а что не ясно? либо отдельную страницу для печати,где только текст,либо при помощи файла стиля print.css(копия style.css от сайта),только убираете всё ненужное,ставите ему none или так,убираете оформление

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

    Как добавить кнопку печати на страницу сайта?

    Здравствуйте, дорогие друзья!

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

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

    Навигация по статье:

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

    Как добавить кнопку печати страницы сайта?

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

    Вместо надписи «Распечатать» может быть любой текст, иконка или картинка.

    Вместо класса print-doc можете указать свой.

    Вот, например, вариант кода с картинкой:

    На сайте это будет выглядеть так:

    И всё бы ничего, но если бы ни одно но. Дело в том, что большинство современных сайтов имеют ширину в среднем 980 – 1280 пикселей, а так как размер бумаги для печати ограничен, то влезет на неё страница с шириной приблизительно 650px. Это приводит к тому, что некоторые элементы страницы будут налазить друг на друга или будут некорректно отображаться.

    Что же делать в этом случае? Вот здесь придётся немного попотеть и создать версию страницы для печати.

    Читать еще:  Ленивая овсянка в банке

    Если ваш сайт адаптируется под мобильные устройства, то вам будет проще так как страница сама немного адаптируется под размер листа, но всё равно есть вероятность что какие то элементы придётся подправить или скрыть.

    Как сделать версию для печати при помощи медиазапроса?

    1. 1. Открываем файл стилей активной темы (style.css или stylesheet.css или другое название, в зависимости от движка сайта).
    2. 2. В самом конце пишем код медиазапроса:

    Скрыть элемент можно вычислив его класс или идентификатор и присвоив ему свойство display:none;

    Как сделать версию для печати при помощи отдельного css файла?

    1. 1. В первую очередь создаём отдельный файл и называем его print.css
    2. 2. Загружаем файл на свой хостинг в папку с «css». Если такой папки нет, то желательно её создать.

    В атрибуте href в кавычках нужно указать путь к вашему созданному файлу print.css. У вас он будет отличаться.

    В коде ссылки это будет выглядеть так:

    Подключение файла стилей осуществляется между тегами …

    У сайтов, работающих на движке, этот фрагмент кода находится в файле header.php, head.php и т.д., в зависимости от движка. Данный файл обычно лежит в папке с темой.
    4. В файле print.css нам нужно скрыть лишние элементы страницы, которые не понадобятся в версии для печати, а так же изменить ширину некоторых блоков с контентом, чтобы они нормально поместились в пределы страницы для печати.

    Как можно просмотреть версию для печати?

    Для того чтобы посмотреть как наша страница будет выглядеть при печати нужно в меню браузера выбрать пункт «Файл»«Печать» или просто «Печать» (в зависимости от браузера)

    Добавить кнопку печати при помощи плагина WordPress

    Если ваш сайт работает на WordPress – считайте что вам повезло! Разработчики этого движка день и ночь трудятся над плагинами упрощающими жизнь пользователей.

    Для добавления кнопки печати воспользуемся плагином Print-O-Matic

    • Не нужно лезть в код темы чтобы вывести кнопку печати
    • Наличие страницы настроек
    • Поддержка шорткодов
    • Возможность задавать для печати только определённые элементы
    • Поддержка иконки печати и возможность управлять её оформлением.

    Устанавливается и настраивается как обычно в разделе «Плагины»«Добавить новый» в строке поиска вводим название и нажимаем на кнопку «Установить» а затем «Активировать»

    Страница настроек плагина находится в разделе «Настройки»«Print-O-Matic»

    Здесь можно задать:

      Default Target Attribute – можем указать тег, класс или идентификатор элемента, который нужно распечатать. Подробнее описано на странице «Target Attribute»

    После задания настроек обязательно нажимаем на кнопку «Сохранить изменения».

    Теперь мы можем вставить шорткод [print-me], там где нам нужно разместить кнопку печати и дело сделано!

    Печать страницы при помощи онлайн сервиса Print Friendly and PDF Button

    1. 1. Переходите на страницу сервиса Print Friendly and PDF Button
    2. 2. Задаём настройки (выбираем CMS, вид кнопок и т.д.) и задаём настройки печати

    Пожалуй, это все известные мне способы добавления кнопки печати на. Если вы знаете ещё какие то – буду рада если поделитесь ими в комментариях.

    Удачи вам и до скорых встреч на страницах моего сайта и не только!

    Ссылка на основную публикацию
    Статьи c упоминанием слов:

    Adblock
    detector