在javascript中打印div内容

Question

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内容。

Answer 1

Proper way to do it, is to use @media print to set display:none 正确的方法是使用@media print设置display:none

@media print {
  .in {display:none}
}

No javascript! 没有javascript！

Answer 2

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);

}

Answer 3

Thanks Aziz shaikh, it works fine. 谢谢Aziz shaikh，它运作正常。 We can print two different divs at once as per following code: 我们可以按照以下代码一次打印两个不同的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);
}

Answer 4

Step1. 第1步。 Write the following javascript inside your head tag 在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. 第2步。 Call the PrintMe('DivID') function by an onclick event. 通过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>

Answer 5

I have written a function that prints an element using an internal IFrame rather than a new window. 我编写了一个使用内部IFrame而不是新窗口打印元素的函数。 The function uses jQuery. 该函数使用jQuery。 You can give it a try. 你可以尝试一下。

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);
}

Answer 6

rawString = document.getElementById('DivIdToPrint').innerHTML;
unwanted = document.getElementById('in').outerHTML;
whatuwant = rawString.replace(unwanted, '');

在javascript中打印div内容

问题描述

6 个解决方案

解决方案1
5 2011-10-17 08:39:40

解决方案2
4 已采纳 2011-10-17 08:42:33

解决方案3
2 2013-03-20 11:21:30

解决方案4
1 2013-04-09 11:40:33

解决方案5
1 2011-11-22 14:13:59

解决方案6
0 2011-10-17 08:40:24

在javascript中打印div内容

问题描述

6 个解决方案

解决方案1 5 2011-10-17 08:39:40

解决方案2 4 已采纳 2011-10-17 08:42:33

解决方案3 2 2013-03-20 11:21:30

解决方案4 1 2013-04-09 11:40:33

解决方案5 1 2011-11-22 14:13:59

解决方案6 0 2011-10-17 08:40:24

解决方案1
5 2011-10-17 08:39:40

解决方案2
4 已采纳 2011-10-17 08:42:33

解决方案3
2 2013-03-20 11:21:30

解决方案4
1 2013-04-09 11:40:33

解决方案5
1 2011-11-22 14:13:59

解决方案6
0 2011-10-17 08:40:24