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

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

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

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

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

Ответ 1

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

<style type="text/css">
@media print
{
body * { visibility: hidden; }
.div2 * { visibility: visible; }
.div2 { position: absolute; top: 40px; left: 30px; }
}
</style>

Ответ 2

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

<html>
<head>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js" > </script> 



<script type="text/javascript">

    function PrintElem(elem)
    {
        Popup($(elem).html());
    }

    function Popup(data)
    {
        var mywindow = window.open('', 'new div', 'height=400,width=600');
        mywindow.document.write('<html><head><title>my div</title>');
        /*optional stylesheet*/ //mywindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />');
        mywindow.document.write('</head><body >');
        mywindow.document.write(data);
        mywindow.document.write('</body></html>');

        mywindow.print();
        mywindow.close();

        return true;
    }

</script>
</head>
<body>

<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>

<input type="button" value="Print" onclick="PrintElem('#yourdiv')" />

</body>
</html>

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

Ответ 3

<script type="text/javascript">
    function printDiv() {    
    var printContents = document.getElementById('Your printable div').innerHTML;
    var originalContents = document.body.innerHTML;
     document.body.innerHTML = printContents;
     window.print();
     document.body.innerHTML = originalContents;
    }
</script>

Ответ 4

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

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

@media print {

   .div1 { display: none; }

}

Ответ 5

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

Ответ 6

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

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

<script>
$(document).ready(function(){
    $("#printButton").click(function(){
        var mode = 'iframe';
        var close = mode == "popup";
        var options = { mode : mode, popClose : close};
        $("div.printableArea").printArea( options );
    });
});
</script>

Ответ 7

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

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

Ответ 8

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

<script>
function printArea(){
    $('body').css('visibility', 'hidden');
    $('.div2').css('visibility', 'visible');
    window.print();
}
</script>

Ответ 9

.class-toggle { display: inline-block; }
#div1, #div2 { display: none; }

function classToggle() {
  $('#div1').addClass('class-toggle');
}

classToggle();

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

Ответ 10

<script type="text/javascript">
    function printDiv() {    
    var printContents = document.getElementById('Your printable div').innerHTML;
    var originalContents = document.body.innerHTML;
     document.body.innerHTML = printContents;
     window.print();
     document.body.innerHTML = originalContents;
    }
</script>