我想使用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();
,但这不起作用。
答案 0 :(得分:57)
有些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);
}
答案 1 :(得分:25)
答案 2 :(得分:7)
不使用任何插件,您可以选择此逻辑。
<?php
$date1 = strtotime("2015-11-16 10:01:13");
$date2 = strtotime("2015-05-06 09:47:16");
$datediff = $date1 - $date2;
echo floor($datediff/(60*60*24))." days"; //output 194 days
?>
答案 3 :(得分:7)
如果你想在没有额外插件的情况下这样做(比如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
打印页面,则应该正常打印页面。
答案 4 :(得分:4)
使用此库:Print.JS
使用此库,您可以打印HTML和PDF。
<form method="post" action="#" id="printJS-form">
...
</form>
<button type="button" onclick="printJS('printJS-form', 'html')">
Print Form
</button>
答案 5 :(得分:3)
上述解决方案都不能很好地工作。他们要么丢失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();
}
答案 6 :(得分:2)
Below code from codepen worked for me as I wanted,
function printData()
{
var divToPrint=document.getElementById("printTable");
newWin= window.open("");
newWin.document.write(divToPrint.outerHTML);
newWin.print();
newWin.close();
}
$('button').on('click',function(){
printData();
})
中使用“下载”属性时,AEM筛选器无法重定向
答案 7 :(得分:1)
看看这个 Plugin
使您的代码变得如此简单 - &gt; $('SelectorToPrint').printElement();
答案 8 :(得分:1)
我在这里尝试了所有非插件方法,但都导致在内容后打印空白页,或者有其他问题。这是我的解决方案:
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;
}
}
答案 9 :(得分:1)
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();
});
答案 10 :(得分:1)
<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;
}
以上功能应该在同一页面上加载。
答案 11 :(得分:1)
首先包含标题
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script type="text/JavaScript" src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.print/1.6.0/jQuery.print.js"></script>
由于您正在使用带有选择器的打印功能,该选择器是print.js的一部分,因此您需要在使用它们之前对其进行调用...
Else
window.print()
会做
$("#btn").click(function () {
$("#printarea").print();
});
或
$("#btn").on('click',function () {
$("#printarea").print();
});
//了解更多: www.tenoclocks.com
答案 12 :(得分:0)
我更新此功能
现在您可以打印完整样式的任何标签或页面的任何部分
必须包含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);
}