Javascript Print Multiple Webpages iFrame Content (Print All Button)

2
votes

Using JavaScript, how do I create a print all button?

The 'Print All' button whenever clicked would iterate through an iFrame's different src's and print the content.

As a note, the iFrame is currently setup on a main webpage. There are navigation buttons to change the content src of the iFrame. This main webpage is set up to resemble navigating through slide content with navigation buttons. The navigation buttons are really navigating to different webpages.

So, I'm guessing that the content would need to be appended to a document or arrayed so that the content could then be printed all at once with the 'Print All' button.

I was successful at printing a 'Current Slide' (or iFrame content) with the following code:

function PrintCurrentSlide()
{
    var el = document.getElementById('ifMain');
    el.contentWindow.focus();
    el.contentWindow.print();
    return;
}

Now, I'm searching for an answer to navigate through the iFrame src's to print content with just one click.

2
javascriptloopsiframeprintingdocument

2 Answers

1
votes

Try this in your script

window.onload=function() {
  window.frames["printf"].focus();
  window.frames["printf"].print();
}
function print() {
var newWin = window.frames['printf'];
newWin.document.write('<body onload=window.print()>This is a new page I inserted</body>');
newWin.document.close();
}
function change(){
var url="http://www.apple.com/";
    var $iframe = $('#ifrm');
    if ( $iframe.length ) {
        $iframe.attr('src',url);   
        return false;
    }
    return true;
}

and in HTML

<input type="button" onclick="print()" value="Test print"/>
<button onclick="change()">next</button>
<iframe id="printf" name="printf" src="dfgdf.html"></iframe>

here put your pages dynamically and get printed. use your logic to get print automatically or in single click or whatever

0
votes

I came up with a way around it. With this you get only one print dialogue box.

The aim is to get the contents of all the iframes into the parent window by manipulating the DOM using javascript. Here is the 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 concatenated 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.

Remember that 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()"
 />