Печать HTML документа
Здравствуйте!
У меня руководство поставило задачу: :mad: Условие: Существует некий HTML документ, находящийся на локальном компьютере пользователя. В этом документе, есть несколько полей (ну например INPUT TYPE=TEXT) и кнопка (BUTTON или INPUT TYPE=SUBMIT). :cool: Задача: Пользователь должен ввести в поля некоторые значения и нажать на кнопку. При нажатии на кнопку, должно появиться диалоговое окно принтера(стандартное windows) и если нажать на "Печать", должен распечататься некоторый документ с теми значениями, который ввел пользователь. :eek: Подскажите пожалуйста, это возможно осуществить с помощью JavaScript?????:confused: Если возможно, то подскажите, как это сделать? |
для начала прописать head
<link rel="stylesheet" type="text/css" href="print.css" media="print" /> создать сам print.css и в нем опредлить что печатать а что нет. например:
* {display: none}
#myform {display: block; visibility: visible; border: 2px solid #ccc;}
на сабмит или баттон onclick="print_doc()" и в javascript пишем
function print_doc(){
window.print() ;
}
|
Прям ностальгия какя-то... Сам изучая давным-давно JS над этой же задачей парился. Только я тогда в VBS сделал.
|
twolf,
сделал, как написано, но печать не идет. По-моему просто страница обновляется... Где я туплю? Вот html: <head> <link href="css/main.css" type="text/css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="css/print.css" media="print" /> <script type="text/javascript" src="js/main.js"></script> </head> ... <input class="inp" type="text" name="txt" id="u3" value="0" size="2" maxlength="4">%<br> <input class="button" type="submit" value="Печать" onclick="print()"></input> CSS:
* {display: none}
input {display: block; visibility: visible; border: 2px solid #ccc;}
JS:
function print(){
window.print() ;
}
|
<input class="button" type="submit" value="Печать" onclick="print_()"></input>
function print_(){
window.print() ;
}
|
Цитата:
|
<head> <link rel="stylesheet" href-"styles/pint.css"> </head> <body> <input type="text" /> <input type="button" value="OK" onclick="window.print();" /> </body> |
спасибо! всем +1)
alexKniaz, принципиально все css и js в отдельных файлах) |
извините, но у ламера опять вопрос:)
печть пошла, но печатается только название документа. Если не применять css, то печатается вся страница. а нужно только содержимое <input > |
HTML и CSS в студию
|
HTML:
<head> <link href="css/main.css" type="text/css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="css/print.css" media="print" /> <script type="text/javascript" src="js/main.js"></script> </head> <body> <input class="inp" type="text" name="txt" id="u3" value="0" size="2" maxlength="4">%<br> <input class="button" style="height:100; width:100%" type="button" onclick="uklon()" value="Расчет" id=c><br> <input class="button" type="reset" value="Очистить"></input> <input class="button" type="submit" value="Печать" onclick="print_doc()"></input> </body> CSS:
* {display: none}
input {display: block; visibility: visible; border: 2px solid #000000;color: 000000;}
|
у вас в HTML ошибка на ошибке.
- для input не нужен закрывающий тег - (style="height:100; width:100%") не указана единица измерения - значение в кавычки (id=c) И в CSS забыли # в свойстве color |
twolf,
прочитайте два предыдущих поста(№9,10). Цитата:
Цитата:
Цитата:
Цитата:
И все это не решает проблему:( |
Цитата:
Цитата:
Цитата:
Цитата:
|
B~Vladi,
ну, хорошо. Я исправил все перечисленные ошибки, хотя я всерьез думал, что это не ошибки. Все элементы отображались так, как задумано. Ну да ладно... Я все исправил, как посоветовалtwolf, но требуемого результата не достиг. На странице все отображается, как надо, но на печать (через print.css) выводится пустая страница. Я пробовал убрать
* {display: none; }
Тогда печатается вся страница (что естественно...) А мне нужно, чтобы печатались только <input>. Плиз, хелп ми:) |
* {display: none; }
input {display: block; !important }
|
B~Vladi,
!important до ; должно быть. да и не поможет это, т.к. причина не в специфичности. * {display: none; } // 0,0,0,0 input {display: block;} //0,0,0,1 Не могу понять где ошибка. |
Цитата:
Поместите инпуты в форму(где им и место) и меняйте дисплей ей. |
B~Vladi,
инпуты в формах. в css :
form {display: block; visibility: visible; border: 2px solid #000000;color: #000000; }
все равно ничего нет. да и нужна печать не всех инпутов. |
html, body {display: block;}
:) про них совсем забыли. ведь * скрывает все теги. |
twolf,
то есть
* {display: none; }
html, body {display: block;}
input {display: block; visibility: visible; border: 5px solid #000000;color: #000000; }
так что ли? не работает:( |
bassolo,
как может быть виден потомок, если его родитель скрыт? Если уж элемент скрыт, то и все его содержимое скрыто. |
работает, проверил. Вы случайно сам html тэг в разметке не забыли? а то в вашем примере его нет.
|
Нет не так. С * работать не будет. Универсального решения нет... всё зависит от разметки. В любом случае * использовать нельзя.
|
Kolyaj,
в том-то и дело, что сначала все скрываем, потом показываем, что нужно, как исключение. (инпут) twolf, не забыл. и html и body. у меня не работает. я дал каждой таблице имя (инпуты, которые надо печатать и которые не надо в разных таблицах), и скрыл те. которые не надо. А так не работает:( B~Vladi, я удалил *. оставил html, body {display: none;} input {display: block; visibility: visible; border: 5px solid #000000;color: #000000; } и все равно ничего не видно... у меня еще вопрос: можно дать имя элементу (инпуту, таблице) и распечатать только его? |
bassolo,
на приведенном вами HTML инпуты печатаются при указании правила html, body {display: block;}. Но у вас инпуты в формах, формы, скорее всего, в диве, див в яйце, яйцо в утке, утка в... Чтобы инпуты были видны, очевидно, все их родители должны быть видны. |
Kolyaj,
хорошо, как же напечатать input class="print", а все остальное (input class="noPrint", img, p и тд...) не печатать? интересна модель типа: все скрыть, указанное напечатать. или это не возможно? нужно прятать каждый элемент? |
Все зависит от вашего DOM-дерева.
|
Можно пройти скриптом, собрать то, что нужно печатать в отдельный див, засунуть его в конец боди, остальное скрыть, а его оставить.
|
по моему-так :
body *{display:none;} input {display:block;} Но тогда input должен быть непосредственным потомком body. Иначе втрое правило придётся переписать для потмка body - предка input |
alexKniaz,
пнятно. то есть отменить правило можно только непосредственного родителя. а у меня инпуты глубоко в таблицах. из-за этого и не работал... спасибо) |
НЕ, тут работает так :
body *{visibility:hidden;} - скрывает всех непосредственных потомков body, а второе для конкретного потомка это правило отменяет. А так во втором праиле селектор можно назначить таблице, чтоб не переделывать всё. |
спасибо,alexKniaz, я учту. Правда я уже переделал:) Дал имя каждой таблице и скрыл/показал нужную:)
|
добрый день, а подскажите, можно распечатать страницу, без предварительного просмотра?
|
| Часовой пояс GMT +3, время: 23:47. |