Как вывести на печать в html

Вывод на печать страницы сайта/блога.

Пример:

Ту часть страницы, которую не нужно распечатывать включаем в конструкцию:
И устанавливаем стиль CSS перед :

В данном случае на листе не будет показана Панель навигации (navbar-iframe). Аналогичным образом можно поступить с боковой панелью, счетчиками, баннерами и другими элементами.

Можно стили вынести в отдельный файл

Более углублённо раскрывает тему данная статья.

22 комментария:

шеф-повар Конгениально!
NMitra, очень не хочу пользоваться той схемой, к которой вы привели меня вчера. Она несет с ссобой массу проблем, решаемых, но проблем. В эту тему,скажите реально ли распечатаь только ту часть текста со страницы, которая отформатирована как, например, цитата, или нумерованный список? Или — можно ли каким-либо образом отформатировать какую-то часть текста на странице, и только она будет выводится на принтер? Я ввобще не могу понять этого, никак! NMitra Без указания галочки «Расширить шаблоны виджета» запрещаем печать заголовка и футера:

.

NMitra Теперь на печать будет выходить только содержание сообщения. Внутри которого на вкладке «Изменить HTML», можно также убрать не нужный для печати материал. На вид и функциональность блога это никак не повлияет.

Согласна, что более удобно было бы, если бы можно было указывать те данные, которые требуются к печати, а не наоборот. Плюс из-за своеобразного кода Blogger приходится клочками убирать материал. шеф-повар Nmitra, спасибо огромное, вы помогли мне пройти этот путь до конца. Два дня я провел в незабываемых джунглях!
Резюме: все-таки я пойду первым, сложным путем, буду создавать параллельный блог с текстовой версией.
Мне удалось очистить для печати самую суть, но в итоге получилась фигня, и это заставит меня пожертвовать стилем ради листа для печати, чего я не очень хочу.
Еще раз огромное спасибо! NMitra Взгляните:

См. ссылка «Рецепт печати».

Здесь я не создавала новое сообщение, а убрала лишнее в span

И времени затратила минут 10. Nyukers Все так. Надо по шаблону побегать. Все сделал, только вот первая стр чистой выходит, почему — не знаю.(
http://nyukers.blogspot.com NMitra Я на печать не вывожу, использую программу PDF24 Editor, которая позволяет сохранить файл при нажатии на значок принтера. В ней первая страница выходит пустой. Текст печатается на следующих четырёх, но он присутствует. Nyukers вот почему первая пустая и непонятно. NMitra Нужно что-то ещё закрывать. Правда, я не помню уже что именно. Анонимный Спасибо 🙂 NMitra Рада оказаться полезной 🙂 Анонимный Спасибо большое! Анонимный Почему при печати ссылки подчеркиваются. NMitra Свойства

можете убрать. Игорь Пушков А как отправить на быструю печать? NMitra Горячие клавиши

CTRL P
Ctrl Shift P

Печать части html страницы

Как сделать так, чтобы строки вывелись на печать, а сама кнопка нет. Вывод на печать сейчас делаю вот таким образом:

Отслеживать
1,342 3 3 золотых знака 14 14 серебряных знаков 27 27 бронзовых знаков
задан 18 мая 2015 в 13:28
825 2 2 золотых знака 13 13 серебряных знаков 40 40 бронзовых знаков

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Можно перенастроить всё через CSS (предварительно добавив ID или класс кнопке печати):

/* Обычные стили */ body < . >.line < . >.print-button /* Стили для печати */ @media print < .print-button /* . >

Отслеживать
ответ дан 18 мая 2015 в 14:46
12.9k 10 10 золотых знаков 40 40 серебряных знаков 77 77 бронзовых знаков

html
html5
печать

Важное на Мете

Читать:

Как открыть дверку в стиральной машинке если ручка сломалась

Подписаться на ленту

Лента вопроса

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

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Javascript печать блока с HTML страницы

При создании очередного сайта столкнулся с задачей печати HTML-страницы. На странице была информация о проекте (коттеджи) и ее нужно было по клику распечатать. Для решения идеально подходит Javascript. Итак, создаем такую структуру:

Обязательно задаем идентификатор. Содержимое может быть любым. Далее напишем небольшую функцию для печати веб-страницы:

И немного поясню. Эта функция откроет новое popup-окно, вызовет функцию печати. После печати автоматически закроет окно. В новое окно передается содержимое блока print-content. Также вызываем стили CSS, чтобы отформатировать содержимое. И, конечно, надо вызывать функцию. Делаем через Javascript функцию onClick:

Ну вот и все. Просто и с душой.

Если браузер не видит CSS стили

Если браузер по той или иной причине не хочет видить CSS, то можно упростить код, удалив пару строк:

 function CallPrint(strid)

Материалы:

Вывод веб страницы на печать

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

Метод JavaScript window.print() позволяет пользователю вывести текущую Web-страницу на печать. В результате вызова метода открывается диалоговое окно Печать (Print), в котором можно выбрать принтер, количество копий и задать другие опции печати. Если принтер не подключен к компьютеру, с которым работает пользователь, метод window.print() игнорируется.

При открытии нового окна с использованием метода window.open() один из параметров управляет отображением панели инструментов. Этот параметр может быть задан таким образом, что панель инструментов нового окна окажется скрытой. Если панель инструментов не отображается, кнопка Печать также недоступна. В этом случае можно включить средства печати в Web-страницу с помощью метода window.print().

Ниже приведен пример кода для вывода страницы на печать.

Кнопка, реализуемая методом window.print(), приводит к тому же результату, что и кнопка Печать панели инструментов окна браузера. Помимо рассмотренного метода, JavaScript включает несколько методов, соответствующих средствам панели инструментов. К ним относятся методы window.back() и window.forward(), которые выполняют функции, аналогичные функциям кнопок Назад (Back) и Вперед (Forward). JavaScript включает также метод window.home(), который загружает начальную страницу браузера аналогично кнопке Домой (Ноте) панели инструментов. С помощью JavaScript в Web-страницу можно добавить и функцию кнопки Остановить (Stop). Ее реализует метод window.stop(). Если создать кнопку на основе метода window.print(), а затем щелкнуть на ней и при этом окажется, что к вашему компьютеру не подключен принтер, будет выведено диалоговое окно с сообщением о том, что необходимо подключить принтер, прежде чем приступить к печати документа.