使用Jquery打印div内容

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用Jquery打印div内容相关的知识,希望对你有一定的参考价值。

我想使用jQuery打印div的内容。这个问题已经在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();
});

但是单击按钮时会出现控制台错误:

未捕获的TypeError:$(...)。print不是函数

但是当我尝试使用打印整个页面时

window.print();

这是工作。但我只想打印特定div的内容。我在许多地方看到了答案$("#printarea").print();,但这不起作用。

答案

一些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);

}
另一答案

Print only selected element on codepen

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();
});
另一答案

我更新了这个功能 现在,您可以使用其完整样式打印任何标签或页面的任何部分 必须包含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);
        }
另一答案

https://github.com/jasonday/printThis

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

很棒的Jquery插件可以完成您的操作

另一答案

不使用任何插件,您可以选择此逻辑。

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

如果你想在没有额外插件(如printThis)的情况下这样做,我认为这应该有效。我们的想法是打印一个特殊的div,而其他一切都是使用CSS隐藏的。如果div是body标签的直接子项,则更容易做到,因此您必须将要打印的任何内容移动到这样的div。 S首先创建一个id为print-me的div作为身体标记的直接子项。然后使用此代码打印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打印页面,页面应该正常打印。

另一答案

使用这个库:Print.JS

使用此库,您可以打印HTML和PDF。

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

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

以上解决方案都没有完美地工作。他们要么丢失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();
    }
另一答案

以下代码中的代码为我工作,如我所愿,

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

另一答案

看看这个Plugin

使您的代码像 - > $('SelectorToPrint').printElement();一样简单

另一答案

我在这里尝试了所有非插件方法,但都在内容之后导致空白页打印,或者有其他问题。这是我的解决方案:

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

以上是关于使用Jquery打印div内容的主要内容,如果未能解决你的问题,请参考以下文章

使用jQuery收集join concatenate打印显示每个div的内容值html文本

是否可以打印被 jQuery 的“slideUp”功能隐藏的 DIV

jQuery 将 div 切片成动画片段

jquery中的$的特殊用法

jquery插件实现网页页面的抓取和打印

使用复选框交换div中所有内容的位置