Как “отдать на печать” конкретный div?

Рецепт того, как “отдать на печать” содержание какого-то div-а вы найдёт в данной заметке.

Реализация состоит из трёх этапов:

  1. Подготовка html вода конкретного div-а
  2. Создание модального окна для печати
  3. Передача html в модальное окно (и его закрытие после “отдачи на печать”)
<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('', 'my 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.document.close(); // necessary for IE >= 10
        mywindow.focus(); // necessary for IE >= 10

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

        return true;
    }

</script>
</head>
<body>

<div id="mydiv">
    This will be printed. 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 Div" onclick="PrintElem('#mydiv')" />

</body>
</html>

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://stackoverflow.com/questions/2255291/print-the-contents-of-a-div
Перевел: Станислав Протасевич
Урок создан: 14 Октября 2015
Просмотров: 21452
Правила перепечатки

5 последних уроков рубрики "jQuery"

^ Наверх ^