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

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

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.

Абсолютные единицы измерения
Единица Описание
in Дюйм (1 дюйм равен 2,54 см)
cm Сантиметр
mm Миллиметр
pt Пункт (1 пункт равен 1/72 дюйма)
pc Пика (1 пика равна 12 пунктам)

11. Вот полезная ссылка http://www.webdevout.net/browser-support-css#css2propsprint. Описание стилей можно найти на сайте http://htmlbook.ru
Вообще советую пройтись по всему списку CSS свойств, даже если вы опытный разработчик. Для себя с удивлением обнаружил незнакомые CSS свойства и что некоторые CSS свойства уже можно безбоязненно использовать.

Конечно же это не полный список советов. Это просто мои мысли.

Рубрики: HTML/CSS
Понравилось? Поделись с другими плз












Комментарии ВКонтакте





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

    С разрывом страницы тоже не всё так просто. Я, например, не решил эффективно проблему — как вставить разрыв страницы произвольно, в зависимости от условий?

    Допустим, у меня есть 100 однотипных прямоугольных блоков текста, они имеют почти одинаковую высоту, допустим 3 см. Нужно расставить разрывы страниц между ними так, чтобы ни один из этих блоков не был разделён по разным страницам A4. Ведь при слегка различающихся высотах на одной странице может поместиться 10 блоков, а может и только 9, а 10-й пополам окажется на двух страницах. По-моему, задача не такая тривиальная.

    • admin:

      то же сталкивался с такой проблемой, делал товарную накладную, а там надо разбивать таблицу, завершив футером таблицы и начав следующую таблицу с шапки-нумерации столбцов, и чтобы следующий контент был обязательно на новой странице. Привёл к одной минимальной высоте, просчитал сколько позиций умещается на странице и вставлял блок с page-break-after: always; Благо у меня там одна или две строки в каждой строке таблицы, так что проблем с разной высотой строк таблицы(блоков в вашем случае) не испытывал. Единственное что я там сделал — вставлял page-break-after: always; заранее, чтобы наверняка умещаелось, то есть в конце при печати на странице оставалось немного места. Конечно это всё костыльно. Название товара может не две, а 10 строк и тогда перед печатью зови программиста править документ перед печатью. Очень хреново.
      Интересно как в 1с всё это сделано. Наверное у них как то размеры чётко можно высчитывать.

  2. Я пока подумываю поместить каждый блок в div или p, а потом попытаться через css выковырять его фактическое значение height, если получится. Ну а там останется только выяснить, вписываются ли они в 280-285 мм (высоту одного листа А4). Думаю, что это придётся делать не на стороне сервера, а на клиентской стороне.

  3. Сергей:

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

    • admin:

      я не очень понял что Вы имеете ввиду, но например если написать
      текст на первой странице
      <div class="pagebreak"></div>
      текст на второй странице

      и прописать, как в статье указано, стиль:
      .pagebreak {
      page-break-after: always;
      }

      то этот блок <div class=»pagebreak»></div> с этим классом будет разрывать страницу. «текст на второй странице» будет принудительно напечатан на следующей странице, без разницы сколько было текста на первой.

      • Сергей:

        Спасибо за ответ.
        я имел ввиду что на подобие колонтитулов (как ворде, эксель)


Оставить комментарий

*