Печать содержимого div с помощью JQuery

Я хочу распечатать содержимое div, используя jQuery. Этот вопрос уже задан в SO, но я не могу найти правильный (рабочий) ответ.

Это мой HTML:

<div id='printarea'>
    <p>This is a sample text for printing purpose.</p>
    <input type='button' id='btn' value='Print'>
</div>
<p>Do not print.</p>

Здесь я хочу распечатать содержимое div printarea.

Я пробовал это:

$("#btn").click(function () {
    $("#printarea").print();
});

Но при нажатии кнопки появляется консольная ошибка:

Uncaught TypeError: $(...). print не является функцией

Но когда я пытаюсь распечатать всю страницу, используя

window.print();

он работает. Но я хочу только распечатать содержимое конкретного div. Я видел ответ $("#printarea").print(); во многих местах, но это не работает.

Ответы

Ответ 1

Некоторое исследование jQuery потерпело неудачу, поэтому я перешел на JavaScript (спасибо за ваше предложение Anders).

И он хорошо работает...

HTML

<div id='DivIdToPrint'>
    <p>This is a sample text for printing purpose.</p>
</div>
<p>Do not print.</p>
<input type='button' id='btn' value='Print' onclick='printDiv();'>

JavaScript

function printDiv() 
{

  var divToPrint=document.getElementById('DivIdToPrint');

  var newWin=window.open('','Print-Window');

  newWin.document.open();

  newWin.document.write('<html><body onload="window.print()">'+divToPrint.innerHTML+'</body></html>');

  newWin.document.close();

  setTimeout(function(){newWin.close();},10);

}

Ответ 2

https://github.com/jasonday/printThis

$("#myID").printThis();

Отличный плагин JQuery, чтобы сделать то, что после

Ответ 3

Без использования какого-либо плагина вы можете выбрать эту логику.

$("#btn").click(function () {
    //Hide all other elements other than printarea.
    $("#printarea").show();
    window.print();
});

Ответ 4

Если вы хотите сделать это без дополнительного плагина (например, printThis), я думаю, что это должно сработать. Идея состоит в том, чтобы иметь специальный div, который будет напечатан, а все остальное скрыто с помощью CSS. Это проще сделать, если div является прямым дочерним элементом тега body, поэтому вам придется перемещать все, что вы хотите распечатать, в div. S Итак, начните с создания div с id print-me в качестве прямого дочернего элемента вашего тега тела. Затем используйте этот код для печати div:

$("#btn").click(function () {
    //Copy the element you want to print to the print-me div.
    $("#printarea").clone().appendTo("#print-me");
    //Apply some styles to hide everything else while printing.
    $("body").addClass("printing");
    //Print the window.
    window.print();
    //Restore the styles.
    $("body").removeClass("printing");
    //Clear up the div.
    $("#print-me").empty();
});

Вам нужны стили:

@media print {
    /* Hide everything in the body when printing... */
    body.printing * { display: none; }
    /* ...except our special div. */
    body.printing #print-me { display: block; }
}

@media screen {
    /* Hide the special layer from the screen. */
    #print-me { display: none; }
}

Причина, по которой мы должны применять стили @print, когда присутствует класс printing, заключается в том, что страница должна быть напечатана как обычно, если пользователь печатает страницу, выбрав File -> Print.

Ответ 5

Ниже код из codepen работал для меня, как я хотел,

function printData()
{
   var divToPrint=document.getElementById("printTable");
   newWin= window.open("");
   newWin.document.write(divToPrint.outerHTML);
   newWin.print();
   newWin.close();
}

$('button').on('click',function(){
printData();
})

Вот ссылка codepen

Ответ 6

используйте эту библиотеку: Print.JS

с помощью этой библиотеки вы можете печатать как HTML, так и PDF.

<form method="post" action="#" id="printJS-form">
    ...
 </form>

 <button type="button" onclick="printJS('printJS-form', 'html')">
    Print Form
 </button>

Ответ 7

Ни одно из вышеперечисленных решений не работает отлично. Они либо теряют CSS, либо должны включать/редактировать внешний файл CSS. Я нашел идеальное решение, которое не потеряет ваш CSS, и вам не придется редактировать/добавлять внешний CSS.

HTML:

<div id='printarea'>
    <p>This is a sample text for printing purpose.</p>
    <input type='button' id='btn' value='Print' onclick='printFunc();'>
</div>
<p>Do not print.</p

JQuery

function printFunc() {
    var divToPrint = document.getElementById('printarea');
    var htmlToPrint = '' +
        '<style type="text/css">' +
        'table th, table td {' +
        'border:1px solid #000;' +
        'padding;0.5em;' +
        '}' +
        '</style>';
    htmlToPrint += divToPrint.outerHTML;
    newWin = window.open("");
    newWin.document.write("<h3 align='center'>Print Page</h3>");
    newWin.document.write(htmlToPrint);
    newWin.print();
    newWin.close();
    }

Ответ 8

Взгляните на это Plugin

Делает ваш код таким же простым, как → $('SelectorToPrint').printElement();

Ответ 9

Я пробовал все подходы без плагинов здесь, но все вызвало пустые страницы для печати после содержимого или возникли другие проблемы. Здесь мое решение:

Html:

<body>
<div id="page-content">        
    <div id="printme">Content To Print</div>
    <div>Don't print this.</div>
</div>
<div id="hidden-print-div"></div>
</body>

Jquery:

    $(document).ready(function () {
        $("#hidden-print-div").html($("#printme").html());
    });

Css:

    #hidden-print-div {
        display: none;
    }

    @media print {
        #hidden-print-div {
            display: block;
        }

        #page-content {
            display: none;
        }
    }

Ответ 10

Печать только выбранного элемента в кодефее

HTML:

<div class="print">
 <p>Print 1</p>
 <a href="#" class="js-print-link">Click Me To Print</a>
</div>

<div class="print">
 <p>Print 2</p>
 <a href="#" class="js-print-link">Click Me To Print</a>
</div>

JQuery

$('.js-print-link').on('click', function() {
  var printBlock = $(this).parents('.print').siblings('.print');
  printBlock.hide();
  window.print();
  printBlock.show();
});

Ответ 11

<div id='printarea'>
    <p>This is a sample text for printing purpose.</p> 
</div>
<input type='button' id='btn' value='Print' onlick="printDiv()">
<p>Do not print.</p>

function printDiv(){
        var printContents = document.getElementById("printarea").innerHTML;
        var originalContents = document.body.innerHTML;
        document.body.innerHTML = printContents;
        window.print();
        document.body.innerHTML = originalContents;
}

Эта функция выше должна быть загружена на той же странице.

Ответ 12

Я обновляю эту функцию
теперь вы можете распечатать любой тег или любую часть страницы в полном стиле
должен включать файл jquery.js

HTML

<div id='DivIdToPrint'>
    <p>This is a sample text for printing purpose.</p>
</div>
<p>Do not print.</p>
<input type='button' id='btn' value='Print' onclick='printtag("DivIdToPrint");' >

JavaScript

        function printtag(tagid) {
            var hashid = "#"+ tagid;
            var tagname =  $(hashid).prop("tagName").toLowerCase() ;
            var attributes = ""; 
            var attrs = document.getElementById(tagid).attributes;
              $.each(attrs,function(i,elem){
                attributes +=  " "+  elem.name+" ='"+elem.value+"' " ;
              })
            var divToPrint= $(hashid).html() ;
            var head = "<html><head>"+ $("head").html() + "</head>" ;
            var allcontent = head + "<body  onload='window.print()' >"+ "<" + tagname + attributes + ">" +  divToPrint + "</" + tagname + ">" +  "</body></html>"  ;
            var newWin=window.open('','Print-Window');
            newWin.document.open();
            newWin.document.write(allcontent);
            newWin.document.close();
           // setTimeout(function(){newWin.close();},10);
        }