Форум

sarik · #1 (**permalink**) 04.03.2013, 12:23

Как выводить на печать содержимое нужного 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 · #2 (**permalink**) 04.03.2013, 12:42

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

sarik · #3 (**permalink**) 04.03.2013, 12:46

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

danik.js · #4 (**permalink**) 04.03.2013, 13:04

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

sarik · #5 (**permalink**) 04.03.2013, 13:09

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

danik.js · #6 (**permalink**) 04.03.2013, 13:29

Распечатать - просто:

<button onclick="window.print()">Печать</button>

rgl · #7 (**permalink**) 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 · #8 (**permalink**) 04.03.2013, 13:52

Сообщение от rgl

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

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

sarik · #9 (**permalink**) 04.03.2013, 13:56

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

rgl · #10 (**permalink**) 04.03.2013, 14:02

Сообщение от danik.js

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

Действительно, из моего сообщения не понятно, что я имел ввиду. Я пытался сделать что-то типа

<style type="text/css">
@media print {
  * { display: none; }
  div#design4668 { display: block; }
}
</style>

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

Форум

Справочник

Discord чат

Курсы javascript