使用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文本