Javascript Print iframe contents only

javascript jquery printing

232,808

Solution 1

I would not expect that to work

try instead

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

and use

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

Alternatively try good old

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

if jQuery cannot hack it

Live Demo

Solution 2

document.getElementById("printf").contentWindow.print();

Same origin policy applies.

Solution 3

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

Solution 4

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.

Solution 5

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.

View more solutions

232,808

Author by

user1083382

Updated on July 05, 2022

Comments

user1083382 almost 2 years

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 get it to print just the iframe?

user158017 over 10 years

this is only working in Chrome for me. I was so sure it would work!
gawpertron over 10 years

I was using jQuery and I found the same methods through the Dom object. i.e. var iframe = $('#printf')[0]; iframe.contentWindow.focus(); iframe.contentWindow.print(); Does this work in IE 9 or lower?
Gullbyrd over 10 years

As of 1/22/2014, this does not work in Chrome, whether you add contentWindow or call window.frames["printf"].print(). It prints the entire page, not just the frame.
mplungjan over 10 years

BOTH my suggestions work for me plungjan.name/SO/testprintiframe.html on Chrome 32.0.1700.76 m on XP.
user158017 over 10 years

I really thought this would work. But it's not working in any browsers for me. :(
Jon TJ about 10 years

it works fine for me, any way i can help? post/message me your code and will take a look, or take a look at an example of where im using it: DIYInvestor go through the comparison page 1, its being implemented successfully on the print icon above the results table.
degenerate almost 10 years

@Gullbyrd I had the same problem as you, and this code worked: var PDF = document.getElementById('fileframe'); PDF.focus(); PDF.contentWindow.print(); From: sitepoint.com/load-pdf-iframe-call-print
taco almost 10 years

The Live Demo link worked for me on Google Chrome Version 34.0.1847.131.
mplungjan almost 10 years

And for me on 36.0.1985.125 m Win7
Jon TJ over 9 years

@user158017, please check my EDIT above - does this help? Am aware quite a long time has passed..
Kiran RS over 9 years

Hi, Welcome to Stackoverflow.Please add some details on your answer or take a look at here .
DavidPostill over 9 years

While this code block may answer the question, it would be a better answer if you could provide some explanation for why it does so.
Jpsy over 8 years

Unfortunately not working on Chrome in Android 6. Prints the whole page.
Sposmen about 8 years

I know that initially this was for desktop browsers. Any alternative for Mobile?
jtate over 7 years

this does not work when loading an iframe with pdf data like so <iframe src="data:application/pdf;base64,JVBERi0..."></iframe> it gives a CORS error even though the frame isn't even loading an external URL. Does anyone know how to get around this?
mplungjan over 7 years

You could load a self printing PDF into a hidden frame instead.
jtate over 7 years

@mplungjan self printing PDF? do you have a sample?
mplungjan over 7 years

Not as a data source - but have a look here stackoverflow.com/questions/687675/…
jtate over 7 years

@mplungjan so I generated a pdf with the embedded javascript but it still doesn't work for me. It gives a CORS error when I do a window.open() on the pdf's data uri. It's so weird, because if I open the pdf in Chrome directly it triggers the print immediately. There seems to be something wrong with how Chrome see's the domain for a data uri window.
mplungjan over 7 years

Sorry I do not have other suggestions
sab669 about 7 years

@mplungjan Does your 'live demo' link work for you in IE 11? I'm using version 11.0.9600.18697CO and this is what I get when printing to PDF
mplungjan about 7 years

I do get some result in IE11 and edge but there was some complaint from Win 10 while doing it
Honsa Stunna about 6 years

Not working if iframe not on same domain, cross-origin SecurityError
Axel about 5 years

actually pretty smart +1
Dinei about 4 years

@HeemanshuBhalla Your iframe is not loaded into the page or you are using an incorrect ID on document.getElementById. Make sure you can obtain a valid reference to the iframe before trying to print it.
mplungjan over 3 years

So 127 upvotes and one down. Perhaps you could comment and I could address your problem?