Javascript Print iframe contents only

Question

This is my code   lt script gt  var body    dddddd      var script     lt script gt window print    lt  scr   ipt gt     var newWin       printf   0  contentWindow document   newWin open    newWin close        body  newWin  append body script     lt  script gt   lt iframe id  printf  gt  lt  iframe gt    This works but it prints the parent page  how do I get it to print just the iframe

User · Answer

I had issues with all of the above solutions in IE8, have found a decent workaround that is tested in IE 8+9, Chrome, Safari and Firefox. For my situation i needed to print a report that was generated dynamically:

// create content of iframe
var content = '<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">'+
'<head><link href="/css/print.css" media="all" rel="stylesheet" type="text/css"></head>'+
'<body>(rest of body content)'+
'<script type="text/javascript">function printPage() { window.focus(); window.print();return; }</script>'+
'</body></html>';

Note the printPage() javascript method before the body close tag.

Next create the iframe and append it to the parent body so its contentWindow is available:

var newIframe = document.createElement('iframe');
newIframe.width = '0';
newIframe.height = '0';
newIframe.src = 'about:blank';
document.body.appendChild(newIframe);

Next set the content:

newIframe.contentWindow.contents = content;
newIframe.src = 'javascript:window["contents"]';

Here we are setting the dynamic content variable to the iframe's window object then invoking it via the javascript: scheme.

Finally to print; focus the iframe and call the javascript printPage() function within the iframe content:

newIframe.focus();
setTimeout(function() {
  newIframe.contentWindow.printPage();
}, 200);
return;

The setTimeout is not necessarily needed, however if you're loading large amounts of content i found Chrome occasionally failed to print without it so this step is recommended. The alternative is to wrap 'newIframe.contentWindow.printPage();' in a try catch and place the setTimeout wrapped version in the catch block.

Hope this helps someone as i spent a lot of time finding a solution that worked well across multiple browsers. Thanks to SpareCycles.

EDIT:

Instead of using setTimeout to call the printPage function use the following:

newIframe.onload = function() {
    newIframe.contentWindow.printPage();
}

User · Answer

I was stuck trying to implement this in typescript  all of the above would not work  I had to first cast the element in order for typescript to have access to the contentWindow   let iframe   document getElementById  frameId   as HTMLIFrameElement  iframe contentWindow print

User · Answer

an alternate option  which may or may not be suitable  but cleaner if it is   If you always want to just print the iframe from the page  you can have a separate   media print    stylesheet that hides everything besides the iframe  Then you can just print the page normally

User · Answer

document getElementById  printf   contentWindow print      Same origin policy applies

User · Answer

If you are setting the contents of IFrame using javascript document write   then you must close the document by newWin document close    otherwise the following code will not work and print will print the contents of whole page instead of only the IFrame contents   var frm   document getElementById id  contentWindow  frm focus      focus on contentWindow is needed on some ie versions frm print

User · Answer

Use this code for IE9 and above   window frames  printf   focus    window frames  printf   print      For IE8   window frames 0  focus    window frames 0  print

User · Answer

At this time  there is no need for the script tag inside the iframe  This works for me  tested in Chrome  Firefox  IE11 and node-webkit 0 12     lt script gt  window onload   function         var body    dddddd       var newWin   document getElementById  printf   contentWindow      newWin document write body       newWin document close      important      newWin focus      IE fix     newWin print       lt  script gt    lt iframe id  printf  gt  lt  iframe gt    Thanks to all answers  save my day

User · Answer

You can use this command   document getElementById  iframeid   contentWindow print      This command basically is the same as window print    but as the window we would like to print is in the iframe  we first need to obtain an instance of that window as a javascript object   So  in reference to that iframe  we first obtain the iframe by using it s id  and then it s contentWindow returns a window DOM  object  So  we are able to directly use the window print   function on this object

User · Answer

Easy way  tested on ie7   firefox  Chrome safari   would be this     id is the  id of the iframe function printFrame id                var frm   document getElementById id  contentWindow              frm focus      focus on contentWindow is needed on some ie versions             frm print                return false

User · Answer

I am wondering what s your purpose of doing the iframe print   I met a similar problem a moment ago  use chrome s print preview to generate a PDF file of a iframe   Finally I solved my problem with a trick    x000D   x000D      print   click function     x000D          noniframe   hide       hide other elements x000D      window print               now  only the iframe left x000D          noniframe   show       show other elements again  x000D      x000D   x000D   x000D

User · Answer

I would not expect that to work  try instead  window frames  printf   focus    window frames  printf   print      and use    lt iframe id  printf  name  printf  gt  lt  iframe gt    Alternatively try good old   var newWin   window frames  printf    newWin document write   lt body onload  window print    gt dddd lt  body gt     newWin document close      if jQuery cannot hack it  Live Demo

[javascript] Javascript Print iframe contents only

Examples related to javascript

Examples related to jquery

Examples related to printing