Javascript 使用 Jquery 打印 div 内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33732739/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Print a div content using Jquery
提问by Deepu Sasidharan
I want to print the content of a div using jQuery. This question is already asked in SO, but I can't find the correct (working) answer.
我想使用 jQuery 打印 div 的内容。这个问题已经在 SO 中提出，但我找不到正确的（工作）答案。
This is is my HTML:
这是我的 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>
Here I want to print the content of the div printarea.
在这里我想打印 div 的内容printarea。
I tried this:
我试过这个：
$("#btn").click(function () {
$("#printarea").print();
});
But it gives a console error when the button is clicked:
但是单击按钮时会出现控制台错误：
Uncaught TypeError: $(...).print is not a function
未捕获的类型错误：$(...).print 不是函数
But when I am trying to print the entire page using
但是当我尝试使用打印整个页面时
window.print();
it is working. But I only want to print the content of a particular div. I saw the answer $("#printarea").print();in many places , but this is not working.
这是工作。但我只想打印特定 div 的内容。我$("#printarea").print();在很多地方都看到了答案，但这不起作用。
回答by Deepu Sasidharan
Some jQuery research has failed, so I moved to JavaScript (thanks for your suggestion Anders).
一些 jQuery 研究失败了，所以我转向了 JavaScript（感谢你的建议Anders）。
And it is working well...
它运行良好......
HTML
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
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);
}
回答by CiaranSynnott
https://github.com/jasonday/printThis
https://github.com/jasonday/printThis
$("#myID").printThis();
Great Jquery plugin to do exactly what your after
很棒的 Jquery 插件可以完全满足您的需求
回答by Anders
If you want to do this without an extra plugin (like printThis), I think this should work. The idea is to have a special div that will be printed, while everything else is hidden using CSS. This is easier to do if the div is a direct child of the body tag, so you will have to move whatever you want to print to a div like that. S So begin with creating a div with id print-meas a direct child to your body tag. Then use this code to print the div:
如果你想在没有额外插件的情况下做到这一点（比如printThis），我认为这应该可行。这个想法是有一个特殊的 div 将被打印，而其他一切都使用 CSS 隐藏。如果 div 是 body 标签的直接子代，这更容易做到，因此您必须将要打印的任何内容移动到这样的 div 中。S 所以首先创建一个 id 的 divprint-me作为你的 body 标签的直接子级。然后使用此代码打印 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();
});
The styles you need are these:
您需要的样式是这些：
@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; }
}
The reason why we should only apply the @printstyles when the printingclass is present is that the page should be printed as normally if the user prints the page by selecting File -> Print.
我们应该只@print在printing类存在时应用样式的原因是，如果用户通过选择File -> Print.
回答by Sanjay Kumar N S
Without using any plugin you can opt this logic.
在不使用任何插件的情况下，您可以选择此逻辑。
$("#btn").click(function () {
//Hide all other elements other than printarea.
$("#printarea").show();
window.print();
});
回答by BibanCS
None of the solutions above work perfectly.They either loses CSS or have to include/edit external CSS file. I found a perfect solution that will not lose your CSS nor you have to edit/add external CSS.
上述解决方案都不是完美的。它们要么丢失 CSS，要么必须包含/编辑外部 CSS 文件。我找到了一个完美的解决方案，它不会丢失您的 CSS，您也不必编辑/添加外部 CSS。
HTML:
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();
}
回答by Amarja
Below code from codepen worked for me as I wanted,
下面来自 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();
})
Here is a link codepen
这是一个链接代码笔
回答by Naveed Ahmed
回答by Akram Elhaddad
I update this function
now you can print any tag or any part of the page with its full style
must include jquery.js file
我
现在更新此功能，
您可以打印任何标签或页面的任何部分，其完整样式
必须包含 jquery.js 文件
HTML
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
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);
}
回答by Timothy Kanski
I tried all the non-plugin approaches here, but all caused blank pages to print after the content, or had other problems. Here's my solution:
我在这里尝试了所有非插件方法，但都导致在内容之后打印空白页，或者有其他问题。这是我的解决方案：
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:
css：
#hidden-print-div {
display: none;
}
@media print {
#hidden-print-div {
display: block;
}
#page-content {
display: none;
}
}
回答by Denis
Print only selected element on codepen
HTML:
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();
});
