Как распечатать выбранную div вместо полной страницы

У меня есть два div: div1 и div2.

Сохранение исходных стилей CSS, применяемых к элементу div2, который печатается.

Я не хочу печатать содержимое внутри div1, а только внутри div2.

Как распечатать?

8 ответов

Попробуйте это


Используя мое следующее решение, вы можете распечатать конкретный контент div с веб-страницы, если вы не хотите печатать полную страницу.

<div id="yourdiv">
 Div you want to print. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a quam at nibh adipiscing interdum. Nulla vitae accumsan ante. 
</div>
<div>
 This will not be printed.
</div>
<div id="anotherdiv">
 Nor will this.
</div>

Живая демонстрация


Вы можете распечатать целую страницу, а не часть страницы. Таким образом, существует два варианта: вы можете либо скопировать содержимое одного элемента на новую страницу, либо распечатать его, либо предотвратить печать другого элемента.

Вы можете использовать медиа-css, чтобы скрыть один элемент от печати. Пример:

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


Посмотрите плагин jqPrint для jQuery: http://plugins.jquery.com/project/jqPrint


.class-toggle { display: inline-block; }
#div1, #div2 { display: none; }
function classToggle() {
 $('#div1').addClass('class-toggle');
}
classToggle();

Затем вы можете играть с обработчиком событий, чтобы справиться с тем, как и когда вы хотите  распечатать вывод.


Простой способ

@media print {
 body > div { display:none; }
 body .div { display:block; }
}


Используйте PrintArea jQuery Plugin для печати определенного содержимого div. Я нашел здесь простой руководство по интеграции - Как напечатать определенную область веб-страницы с помощью jQuery

Для использования плагина PrintArea jQuery вам нужен только следующий код.


Вы также можете сделать это с помощью jQuery:

licensed under cc by-sa 3.0 with attribution.