5

I would like to know if it is possible to print an HTML page containing an IFRAME that spans multiple pages. For some reason the browser keeps truncating the IFRAME after the first page. Here is a minimalistic example that demonstrates the issue outlined above. At first, here is a simple HTML page containing an IFRAME that should be optimized for printing:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>TEST</title>

    <style>
        html, body {
            height: 100%;
        }

        iframe {
            width: 100%;
            height: 100%;
        }
    </style>

  </head>
  <body>
    <iframe src="iframe-content.html">
    </iframe>
  </body>
</html>

And here is the page I want to embed:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>TEST-CONTENT</title>

  </head>
  <body>
    <p>
      Some very, very long text spawning multiple pages.
    </p>
  </body>
</html>

Using JavaScript is not an option. I'm looking for a solution that uses CSS only. Any help would be greatly appreciated.

4
  • What do you want to happen? What is the use case? Do you want to print the whole iFrame when someone presses ctrl+p
    – raam86
    Commented Jun 25, 2013 at 13:39
  • Yes, exactly: I want the whole IFRAME to be printed when the user presses CTRL+P. The use case is that I'm working on an application that embeds content from another application. It is a strict requirement that printing just works without applying any JavaScript magic. Commented Jun 25, 2013 at 13:56
  • How about a "print" button which is a link to the IFrame origin? Also is the iframe from the same domain?
    – raam86
    Commented Jun 25, 2013 at 14:36
  • 1
    Unfortunately a "print" button is not an option because one of our requirements is that CTRL+P just works. The IFRAME comes from the same domain. Commented Jun 26, 2013 at 6:07

3 Answers 3

0

You could specify in the meta of the parent doc because CSS does not have the ability specify the page to be printed, just how it looks.

<link rel=alternate media=print href="printme.html">

If you are trying to print the whole iframe inside the parent, you need to embed a print specific CSS doc. using this along with print preview will help you zero-in.

<link rel="stylesheet" href="print.css"  media="print">
2
  • Thanks a lot for your answer. Unfortunately <link rel=alternate media=print href="printme.html"> only seems to work in IE. As for print specific CSS files: We've experimented with them a lot, but did not find a solution. Can you be a bit more specific? Commented Jun 26, 2013 at 7:41
  • I really wish this was a thing. (It is part of the spec.) Unfortunately, I couldn't get it to work in Chrome, and I found this Firefox ticket which seems to indicate they're in no rush to support this. Commented Aug 7, 2017 at 21:02
0

Only CSS solution - have to set iframe width to static size. For A4 Portrait the value of width is near of 670 pixels. For Landscape printing the value will be another.

iframe {
    width: 670px;
}

Working in chromium browser.

0

My solution uses javascript to manipulate the DOM.

Also, your iframe needs an id attribute as shown below -- id='iframe1'

<body>
  <iframe id='iframe1' src="iframe-content.html">
  </iframe>
</body>

here is the javascript code:

<script>

 pages =[] // initiate an empty list here

function printPage() {

// get the iframe and push its innerHTML into the list    

var frame_content = document.getElementById('iframe1');
pages.push(frame_content.contentWindow.document.body.innerHTML); 

if (pages && pages.length) {

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

// Then we now set the parent window to be equal to pages

window.content.document.body.innerHTML = pages;
// then we print this new window that contains the iframe's innerHTML
window.print();
} 
else {
// do nothing
}


}

With this solution, the print will not truncate your pages.

Also, in case you have multiple iframes, it generates only one print dialogue box.

Someone may wonder why i am pushing to a list. This caters for cases where you have more than one iframe hence you can easily push and concatenate all their innerHTML.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.