Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Как выводить на печать содержимое нужного Div-а? (https://javascript.ru/forum/misc/36101-kak-vyvodit-na-pechat-soderzhimoe-nuzhnogo-div.html)

sarik 04.03.2013 12:23

Как выводить на печать содержимое нужного Div-а?
 
Как выводить на печать содержимое нужного Div-а?

Есть Div форма и в ней есть тексти и форми . Как сделать так чтобы можно было отправить на печать только содержимое нужного div-а?


Наприме: Вот форма и нужно выводить на печать только содержимое нужной форми тоесть содержимое design4668
<html>
<div id="design4668">
<table><tr> <td>11</td><td>22</td> </tr></table>
<b>1122/<b>
</div>
</html>

danik.js 04.03.2013 12:42

Во многих браузерах есть события onbeforeprint|onafterprint
По событию beforeprint скрываем все кроме нужного, по afterprint возвращаем все на место. Можно просто подключить к документу таблицу стилей с атрибутом media=print и в ней скрыть все лишнее.

sarik 04.03.2013 12:46

а можно отправить содержимое нужного div-а из php в html форму а потом расспечатать?

danik.js 04.03.2013 13:04

Я написал два способа как можно распечатать только определенный элемент, вместо всей страницы. Что именно не понятно? Можно еще попробовать похимичить с фреймом, или открывать новое popup-окно, и печатать его.

sarik 04.03.2013 13:09

а как открывать popup-окно, и расспечатать его? если можно то по подробнее . если возможно покажите как:)

danik.js 04.03.2013 13:29

Распечатать - просто:
<button onclick="window.print()">Печать</button>

rgl 04.03.2013 13:34

<html>

<head>

<style type="text/css">

@media print {
  .noprint { display: none; }
}

</style>

</head>

<body>

<div class="noprint">Some text</div>

<div>
<table><tr> <td>11</td><td>22</td> </tr></table>
<b>1122/</b>
</div>

<div class="noprint">One Two Three Four Five</div>

</body>

</html>


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

danik.js 04.03.2013 13:52

Цитата:

Сообщение от rgl
Как выяснилось, мой способ не очень хороший, поскольку свойство display не наследуется, т.е. придется присваивать класс всем элементам (включая вложенным) вне нужного дива.

Че за бред. Да, оно не наследуется. Но вложенные элементы не будут отображены, если не отображен предок.

sarik 04.03.2013 13:56

а можно как то отправить содержимое нужного дива в другую форму а потом расспечатьтать или импортировать в word можно содержимое div-а?

rgl 04.03.2013 14:02

Цитата:

Сообщение от danik.js (Сообщение 238644)
Че за бред. Да, оно не наследуется. Но вложенные элементы не будут отображены, если не отображен предок.

Действительно, из моего сообщения не понятно, что я имел ввиду. Я пытался сделать что-то типа
<style type="text/css">
@media print {
  * { display: none; }
  div#design4668 { display: block; }
}
</style>

но по указанной причине это не сработало. Тогда я заменил на что-то некрасивое, но работающее.


Часовой пояс GMT +3, время: 10:45.