|
Форум » Вебмастеру » Полезные статьи » Как распечатать HTML документ |
Как распечатать HTML документ |
off-line Добавлено: 2012-Авг-31 - 22:13 | Сообщение #1
Всем форумчанам привет, и так проведу для вас небольшой урок по теме "как распечатать HTML документ с использованием всего лишь одной javascript инструкции print()".
Ну чтож откройте любой текстовый редактор (в своем случае я буду использовать notepad++), и пишем любой текст который вам понравиться, для новичков предоставлю уже готовый HTML документ Code <html> <head> <title> Урок по печати html документов </title> </head> <body> <h1>Здраствуйте я учусь печатать html документ, спасибо за внимание =)</h1> </body> </html> Теперь давайте добавим под ваш текст вот такой код Code <a onclick="print()" href="#">Распечатать</a> <!-- <Заметте что в данном коде используеться инструкция print() она и позволяет вывести окно с данными для печати> --> Должно выглядеть так Code <html> <head> <title> Урок по печати html документов </title> </head> <body> <h1>Здраствуйте я учусь печатать html документ, спасибо за внимание =)</h1> <a onclick="print()" href="#">Распечатать</a> </body> </html> В прочьем это неважно вы можете добавлять данный код в любоее угодное для вас место (только не за пределы тегов <body></body>) и так - сохраняем документ в формате html, и запускаем его в броузере, нажмите по вот єтой ссылке Должно вывести вот такое окно Теперь рассмотрим функции данного окна 1.Печать (начинает печатать документ) 2.Отмена (Отменяет печать и закрывает окно) 3.Смена принтера (я так понял) 4.Устанавливает количество страниц для печати 5.Количество копий одного листа 6.Раскладка листа на которой будет применена печать 7.Устанавливает рассположение полей текста 8.Показывает и убирает текст который находиться в самом верху и в самом низу! 9.Применяет использование системного окна для печати Вот вам и весь урок но эщё рассмотрим с вами одну проблемму, ей является именно слово "расспечатать", дело в том что весь текст будет применён в печать вместе со ссылкой для вызова окна печати! Что бы исправить эту проблемму, мы будем использовать стили CSS - давайте добавим перед </head> вот такой код Code <link rel="stylesheet" type="text/css" href="print.css" media="print" /> <!-- < Обратите внимание на свойство "media='print'" оно обозначает что файл стилей css предназначен только для принтера > --> Теперь давайте с созданным вами html документом создадим файл print.css (сохраняем там где находиться ваш html документ), теперь когда создали открываем файл и прописываем туда вот такой код Code .no {display:none;} Сохраняем и теперь открываем html документ в блокноте и код Code <a onclick="print()" href="#">Распечатать</a> Code <div class="no"><a onclick="print()" href="#">Распечатать</a></div> Теперь ссылка больше не будет применена как текст для печати Ну от и в принципе всё. Урок подготовил пользователь buktor Прикрепления:
6280023.jpg
(46.5 Kb)
·
4358521.jpg
(136.3 Kb)
·
4753986.jpg
(139.5 Kb)
·
6215592.jpg
(90.5 Kb)
Работаем не покладая рук и ног :) Сообщение отредактировал buktor - Пятница, 2012-Авг-31, 22:26
|
off-line Добавлено: 2012-Сен-07 - 18:11 | Сообщение #2
Также можно запустить данную функцию у виде сценария
Code <script type="text/javascript"> print(); </script> Работаем не покладая рук и ног :) |
| |||
| |||