Javascript 如何打印选定的div而不是完整的页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4373922/
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
How to print selected div instead complete page
提问by Bharanikumar
I have two divs: div1and div2.
我有两个 div：div1和div2.
Maintaining the original css styles applied to the div2element being printed.
保持应用于div2正在打印的元素的原始 css 样式。
I don't want to print content inside div1but only the inside of div2.
我不想在里面打印内容，div1而只想在div2.
How to print?
如何打印？
回答by Bhanu Prakash Pandey
Try this
尝试这个
<style type="text/css">
@media print
{
body * { visibility: hidden; }
.div2 * { visibility: visible; }
.div2 { position: absolute; top: 40px; left: 30px; }
}
</style>
回答by Hardik
Using my following solution you can print the specific div content from your web page if you don't want to print your full page.
如果您不想打印整页，可以使用我的以下解决方案从您的网页打印特定的 div 内容。
<html>
<head>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js" > </script>
<script type="text/javascript">
function PrintElem(elem)
{
Popup($(elem).html());
}
function Popup(data)
{
var mywindow = window.open('', 'new div', 'height=400,width=600');
mywindow.document.write('<html><head><title>my div</title>');
/*optional stylesheet*/ //mywindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />');
mywindow.document.write('</head><body >');
mywindow.document.write(data);
mywindow.document.write('</body></html>');
mywindow.print();
mywindow.close();
return true;
}
</script>
</head>
<body>
<div id="yourdiv">
Div you want to print. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a quam at nibh adipiscing interdum. Nulla vitae accumsan ante.
</div>
<div>
This will not be printed.
</div>
<div id="anotherdiv">
Nor will this.
</div>
<input type="button" value="Print" onclick="PrintElem('#yourdiv')" />
</body>
</html>
回答by Gopinath
<script type="text/javascript">
function printDiv() {
var printContents = document.getElementById('Your printable div').innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
</script>
回答by Guffa
You can only print a whole page, not part ofg a page. So, there is two options, you can either copy the content of one element into a new page and print that, or prevent the other element from being printed.
您只能打印整页，不能打印页面的一部分。因此，有两个选项，您可以将一个元素的内容复制到新页面并打印，或者阻止打印另一个元素。
You can use a media css to hide one element from printing. Example:
您可以使用媒体 css 来隐藏打印的一个元素。例子：
@media print {
.div1 { display: none; }
}
回答by Vinblad
Have a look at the jqPrint plugin for jQuery: http://plugins.jquery.com/project/jqPrint
看看 jQuery 的 jqPrint 插件：http://plugins.jquery.com/project/jqPrint
回答by Anirban Das
You can also do it using jQuery:
您也可以使用 jQuery 来实现：
<script>
function printArea(){
$('body').css('visibility', 'hidden');
$('.div2').css('visibility', 'visible');
window.print();
}
</script>
回答by RickShaw
.class-toggle { display: inline-block; }
#div1, #div2 { display: none; }
function classToggle() {
$('#div1').addClass('class-toggle');
}
classToggle();
Then you can play with event handler to handle how and when you want to print the output.
然后您可以使用事件处理程序来处理您想要打印输出的方式和时间。
回答by Cenk YAGMUR
Easy way
简单的方法
@media print {
body > div { display:none; }
body .div { display:block; }
}
回答by JoyGuru
Use PrintArea jQuery Plugin to print specific div content. I have found the easy integration guide from here - How to print a specific area of the web page using jQuery
使用 PrintArea jQuery Plugin 打印特定的 div 内容。我从这里找到了简单的集成指南 -如何使用 jQuery 打印网页的特定区域
You need only the following code to use PrintArea jQuery Plugin.
您只需要以下代码即可使用 PrintArea jQuery 插件。
<script>
$(document).ready(function(){
$("#printButton").click(function(){
var mode = 'iframe';
var close = mode == "popup";
var options = { mode : mode, popClose : close};
$("div.printableArea").printArea( options );
});
});
</script>
回答by Jayesh Paunikar
<script type="text/javascript">
function printDiv() {
var printContents = document.getElementById('Your printable div').innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
</script>
