Best IT Recipes

Javascript Print only iframe content

This is my code.

<script> var body = "dddddd" var script = "<script>window.print();</scr'+'ipt>"; var newWin = $("#printf")[0].contentWindow.document; newWin.open(); newWin.close(); $("body",newWin).append(body+script); </script> <iframe id="printf"></iframe>

This works, but it prints the parent page, how do I print it only in the iframe?

+57
javascript jquery printing
Mar 08 2018-12-12T00:
source share
11 answers

I would not expect this to work

try instead

 window.frames["printf"].focus(); window.frames["printf"].print();

and use

 <iframe id="printf" name="printf"></iframe>

Alternatively try the good old

 var newWin = window.frames["printf"]; newWin.document.write('<body onload="window.print()">dddd</body>'); newWin.document.close();

if jQuery can't hack it

Live demo

+110
Mar 08 2018-12-12T00:
source share
— -
 document.getElementById("printf").contentWindow.print();

The same origin policy applies .

+16
Mar 08 2018-12-12T00:
source share

The easy way (tested on ie7 +, firefox, Chrome, safari) is

 //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; }
+11
Jan 15 '13 at 1:27
source share

an alternative that may or may not be suitable, but cleaner if it:

If you always want to simply print the iframe from the page, you can have a separate @media print {} stylesheet that hides everything except the iframe. Then you can just print the page as usual.

+9
Mar 08 '12 at 12:11
source share

You can use this command:

 document.getElementById('iframeid').contentWindow.print();

This command is basically the same as window.print (), but since the window we would like to print is in an iframe, you first need to get an instance of this window as a javascript object.

So, referring to this iframe, we first get the iframe using its id, and then it returns a window object (DOM) to contentWindow. Thus, we can directly use the window.print () function for this object.

+7
Feb 20 '15 at 5:54
source share

I had problems with all of the above solutions in IE8, they found a decent workaround that was 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 javascript printPage () method before the body close tag.

Then create an iframe and add it to the parent body so that its contents are accessible:

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

Then set the contents:

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

Here we set the dynamic content variable to an iframe window object, and then call it through the javascript: schema.

Finally, for printing; focus the iframe and call the javascript printPage () function on the iframe content:

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

SetTimeout is not necessary, however, if you download a large amount of content, I find that Chrome sometimes did not print without it, so this step is recommended. An alternative is wrap 'newIframe.contentWindow.printPage ();' in try catch and put the completed version of setTimeout in the catch block.

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

EDIT:

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

 newIframe.onload = function() { newIframe.contentWindow.printPage(); }
+4
03 Oct '13 at 9:32
source share

There is no need for a script tag inside the iframe at this time. This works for me (tested in Chrome, Firefox, IE11 and node -webkit 0.12):

 <script> 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(); } </script> <iframe id="printf"></iframe>

Thanks everyone, save my day.

+3
Apr 24 '15 at 0:54
source share

If you set the contents of an IFrame using javascript document.write() , then you should close the document newWin.document.close(); otherwise the following code will not work and printing will print the contents of the entire page, not just the contents of the IFrame.

 var frm = document.getElementById(id).contentWindow; frm.focus();// focus on contentWindow is needed on some ie versions frm.print();
0
Sep 15 '14 at 3:58
source share

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();
0
Jul 02 '15 at 7:20
source share

I'm stuck trying to implement this in typewriting; all of the above will not work. I had to bring the element first so that the typescript had access to the contentWindow.

 let iframe = document.getElementById('frameId') as HTMLIFrameElement; iframe.contentWindow.print();
0
Jul 09 '19 at 18:48
source share

I am wondering what your goal is to do iframe printing.

I met a similar problem a minute ago: use chrome preview to create a PDF iframe.

Finally, I solved my trick problem:

 $('#print').click(function() { $('#noniframe').hide(); // hide other elements window.print(); // now, only the iframe left $('#noniframe').show(); // show other elements again. });
-one
Apr 29 '15 at 13:36
source share


More articles:


All Articles