javascript 在javascript中打印div内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7791158/
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 div contents in javascript
提问by salma
My print html is below
我的打印 html 在下面
<div id="DivIdToPrint" style="border:1px solid #000000;">
fdghgjhghjkjk
<div id="in">TO be are not to be that is the question</div>
</div>
and javascript code is :
和 javascript 代码是：
function printDiv()
{
var divToPrint=document.getElementById('DivIdToPrint');
var newWin=window.open('','Print-Window','width=400,height=400,top=100,left=100');
newWin.document.open();
newWin.document.write('<html><body onload="window.print()">'+divToPrint.innerHTML+'</body></html>');
newWin.document.close();
setTimeout(function(){newWin.close();},10);
}
I want to print "DivIdToPrint" div but don't show "in " div content.
我想打印“DivIdToPrint”div，但不显示“in”div 内容。
回答by kan
Proper way to do it, is to use @media printto set display:none
正确的做法是使用@media print设置display:none
@media print {
.in {display:none}
}
No javascript!
没有javascript！
回答by Aziz Shaikh
In your JS code add style to hide the "in" div <style>#in {display:none}</style>, like this:
在您的 JS 代码中添加样式以隐藏“in” div <style>#in {display:none}</style>，如下所示：
function printDiv()
{
var divToPrint=document.getElementById('DivIdToPrint');
var newWin=window.open('','Print-Window','width=400,height=400,top=100,left=100');
newWin.document.open();
newWin.document.write('<html><head><style>#in {display:none}</style><body onload="window.print()">'+divToPrint.innerHTML+'</body></html>');
newWin.document.close();
setTimeout(function(){newWin.close();},10);
}
回答by Amit Jha
Thanks Aziz shaikh, it works fine. We can print two different divs at once as per following code:
感谢 Aziz shaikh，它运行良好。我们可以按照以下代码一次打印两个不同的 div：
function printDiv()
{
var divToPrint=document.getElementById('divcostlist');
var clientinfo=document.getElementById('clientinfo');
var newWin=window.open('','Print-Window','width=400,height=400,top=100,left=100');
newWin.document.open();
newWin.document.write('<html><head><style>#in {display:none}</style><body onload="window.print()">'+clientinfo.innerHTML+divToPrint.innerHTML+'</body></html>');
newWin.document.close();
setTimeout(function(){newWin.close();},10);
}
回答by Hardik Thaker
Step1. Write the following javascript inside your head tag
步骤1。在 head 标签中写入以下 javascript
<script language="javascript">
function PrintMe(DivID) {
var disp_setting="toolbar=yes,location=no,";
disp_setting+="directories=yes,menubar=yes,";
disp_setting+="scrollbars=yes,width=650, height=600, left=100, top=25";
var content_vlue = document.getElementById(DivID).innerHTML;
var docprint=window.open("","",disp_setting);
docprint.document.open();
docprint.document.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"');
docprint.document.write('"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">');
docprint.document.write('<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">');
docprint.document.write('<head><title>My Title</title>');
docprint.document.write('<style type="text/css">body{ margin:0px;');
docprint.document.write('font-family:verdana,Arial;color:#000;');
docprint.document.write('font-family:Verdana, Geneva, sans-serif; font-size:12px;}');
docprint.document.write('a{color:#000;text-decoration:none;} </style>');
docprint.document.write('</head><body onLoad="self.print()"><center>');
docprint.document.write(content_vlue);
docprint.document.write('</center></body></html>');
docprint.document.close();
docprint.focus();
}
</script>
Step2. Call the PrintMe('DivID') function by an onclick event.
第2步。通过 onclick 事件调用 PrintMe('DivID') 函数。
<input type="button" name="btnprint" value="Print" onclick="PrintMe('divid')"/>
<div id="divid">
here is some text to print inside this div with an id 'divid'
</div>
回答by Yaniv
I have written a function that prints an element using an internal IFrame rather than a new window. The function uses jQuery. You can give it a try.
我编写了一个使用内部 IFrame 而不是新窗口打印元素的函数。该函数使用 jQuery。你可以试一试。
function printHtmlElement(elem)
{
$('.lp_print_frame').remove(); // remove previous iframes. we do not remove them at the end of the function to allow the print to work properly
var iframe = $('<iframe class="lp_print_frame" src="about:blank" width="100px" height="100px" />'); // display:block needed for IE
$('body').append(iframe);
var frameWindow = iframe[0].contentWindow;
frameWindow.document.write('<html><head></head><body></body></html>');
frameWindow.document.close();
// copy css from current html
var cssElems = $('link,style');
for(var i=0;i<cssElems.length;i++)
{
var head = frameWindow.document.getElementsByTagName('head')[0];
if (frameWindow.document.importNode)
head.appendChild( frameWindow.document.importNode(cssElems[i],true) );
else
head.appendChild( cssElems[i].cloneNode(true) );
}
// copy a copy of elem
if (frameWindow.document.importNode)
frameWindow.document.body.appendChild(frameWindow.document.importNode(elem,true));
else
frameWindow.document.body.appendChild(elem);
setTimeout(function() { // timeout is needed for FF
if (frameWindow.focus) frameWindow.focus(); // focus is needed for IE
frameWindow.print();
iframe.css('display','none');
},1);
}
回答by Moe Sweet
rawString = document.getElementById('DivIdToPrint').innerHTML;
unwanted = document.getElementById('in').outerHTML;
whatuwant = rawString.replace(unwanted, '');
