Print preview from multiple iframes?

Question

I have several iframes in a page. I want to show in a print preview all the iframe contents as snapshots of iframes. I used window.print() for individual iframes, and it's working fine, but how do I do it for multiple frames?

Answer 1

You need to focus all frames one-by-one and merge in print report.

You can achieve it, with this code:

HTML:

<button id="printButton" onclick="javascript:printPage()" >Print this page</button>

<h1 id='header'><b>Awesome Print Report</b></h1>
<iframe id="ifr1" src="http://amazon.com"></iframe>
<iframe id="ifr2" src="http://amazon.com"></iframe>
<iframe id="ifr3" src="http://amazon.com"></iframe>
<iframe id="ifr4" src="http://amazon.com"></iframe>
<iframe id="ifr5" src="http://amazon.com"></iframe>
<iframe id="ifr6" src="http://amazon.com"></iframe>

JavaScript:

function printPage() {

    window.print();

    for (var k = 0; k < window.frames.length; k++) {
        window.frames[k].focus();
        window.frames[k].print();
    }

}

CSS:

#header {
    margin - top: 20px;
}

@media print {
    #printButton {
        display: none;
    }
}

This CSS will hide print button on printed report.

Here is JsFiddle for you: http://jsfiddle.net/zur4ik/r7pvF/

Answer 2

May this code helpful for you..

HTML:

<input type="submit" value="Print All"
  onclick="javascript:printall()"
/>
<p>Hi! I'm a report!</p>
<iframe id="frame1" src="http://indiabix.com"></iframe>
<iframe id="frame2" src="http://indiabix.com"></iframe>
<iframe id="frame3" src="http://indiabix.com"></iframe>
<iframe id="frame4" src="http://indiabix.com"></iframe>

Script

function printall() {
  window.print();
  for (var i=0; i<window.frames.length; i++) {

    window.frames[i].focus();
    window.frames[i].print();
  }
}

Fiddle : http://jsfiddle.net/ackMC/5/

Answer 3

If iframe previews may be just static images, you can do the following:

• provide hidden image (with preview) next to each iframe
• provide separate CSS file for printer using media queries
• in this file, hide the iframes and show the images

If you do it like this, you will have images with previews instead of iframes in print view.

Answer 4

I think the biggest problem here is getting content from different frames into one view, which can be printed. Wether you want this in a .pdf or with window.print(). Is it possible for you to get the content of all frames which need to be printed into one document (frame)? For instance With AJAX, cURL, or PHP-methods? I think that's the only way to make one printable document of it.

Good luck!

Answer 5

YES it is possible to get the content of all iframes to be printed into the parent window. I achieved it with this code.

<script>

pages =[] // initiate an empty list here

function printPage() {

var frames = document.getElementsByTagName('iframe');
// get all the iframes and loop over them
// then push their innerHTML into the list
for (var i = 0; i < frames.length; i++){ 
        pages.push(frames[i].contentWindow.document.body.innerHTML); 
    ;
}
if (pages && pages.length) {

// this if statement, just checks to ensure our list is not empty before running the code.

// here is the magic, we now set the parent window to be equal to all the iframes innerHTML
    window.content.document.body.innerHTML = pages;
// then we print this new window that contains all the iframes
    window.print();
} 
else {
// do nothing
}


}

with this solution you even avoid the problem of the iframe being cut off if it exceeds one page.

Plus, you get only one print dialogue box instead to print all the pages.

In your parent page HTML you will have the code below to call the printPage function.

<input type="submit" value="Print All"
  onclick="javascript:printPage()"
 />