Iframe cuts at the bottom when printing in IE

Question

On IE11 printing the page below, cuts the iframe at the bottom rather than letting it expand to the next page. How can I prevent that and make it print everything?

Note: to reproduce this issue, just paste the code below into notepad and open it in IE

<html >
    <head>
        <style>
        .myiframe{
            width:100%;
            height:6000px;
        }
        </style>

    </head>
    <body>

        <div>
            <a href="javascript:print()" ><h1>Print</h1></a>
        </div>

        <iframe class="myiframe" id="myiframe" scrolling="no" src="https://en.wikipedia.org/wiki/Wiki"/>

        <div>
            The rest of the page
        </div>

    </body>
</html>

On chrome it works fine. the content of the iframe expands and are all printed

Possible duplicate of [Printing Iframe in IE 11 only prints first page](https://stackoverflow.com/questions/33735334/printing-iframe-in-ie-11-only-prints-first-page) — Daniel, Jul 13 '17 at 14:08
Just see if this helps https://www.appnovation.com/blog/how-avoid-your-web-printing-page-being-cut https://support.microsoft.com/en-in/help/973479/unable-to-print-or-view-the-print-preview-of-a-webpage-in-internet-exp https://answers.microsoft.com/en-us/ie/forum/ie11-windows_7/ie11-cant-print-web-pages/6176b43c-273f-4a00-9acc-b8f65f9c603f — Eggineer, Jul 18 '17 at 09:10
1) I see the same behaviour (as for IE) in Edge and Firefox. 2) It's not the issues that bottom is cut, it's just first page in only printed for this HTML containing `iframe`. What do you think about this? — Vadim Ovchinnikov, Jul 19 '17 at 05:33
This is really the same [question/issue](https://stackoverflow.com/questions/22965175/iframe-content-gets-cut-off-when-printing). — Vadim Ovchinnikov, Jul 19 '17 at 05:45
Can you please fix you HTML? `iframe` must have closing tag, so it should be ``. — Vadim Ovchinnikov, Jul 20 '17 at 04:30

Maxime · Answer 1 · 2017-07-22T16:55:04.660

I tried to find some workarounds to get more or less to the same result. These solutions should work fine on any browser.

Look at the solution 4. It seems to be the closest to what you want to achieve. (With working example)

Solution 1: I think I've got a solution that is not perfect, but might do the job.

Just before printing, you replace the iframe with an image of the iframe. I found this library called iframe2image : https://github.com/twolfson/iframe2image.

To catch the printing event, you can use the answer to this question: https://stackoverflow.com/a/23170458/2525304

I haven't had the chance to test it, but I think you could get something going with this.

EDIT:

Solution 2: Here is another think that could work. You could use this Html to PDF api to first convert the content of the iframe to a pdf. Then include this pdf where the iframe was (by using PDF.js for example) and print the page.

Here is another api doing this: http://www.convertapi.com/web-pdf-api

EDIT 2:

Solution 3 (working example): I just found this website that lets you embed a Save page to PDF button that will return a pdf version of the page the user is on. You could replace the print button on your page with this button and tell the user to print the generated pdf.

Working example

The only problem is that the user is sent on another website to download the file. I think you can get a direct link to the pdf file when paying for the basic membership (5$/month). There might be similar services offering a direct links for free that I haven't found.

EDIT 3:

Solution 4 (with working example):

I just found a website that gives a direct link to the generated PDF file of the page. More information here: http://pdf-ace.com/save-as-pdf-button/

Working example (I replaced the Print button)

score 7 · Answer 2 · edited Jul 21 '17 at 02:11

7

I actually just had to add a max-height element and set it as max-height: 100%; which is what allowed the page to continue on.

You should have three existing style elements, two of which you already wrote.

They are:

width: 100%;
height: 6000px;
max-height: 100%;

Your body has absolute positioning, I assume. Try to create and adjust the CSS height property of the absolutely positioned element(s). Since I don't have the markup and/or CSS, I can't say what height needs to be set on which element(s). More than likely, it's going to be either 100% or auto. Possibly even a combination of both.

When I copy and pasted the code you've provided into a file, then opened it and tried to print, I did receive the same issue. However, what I described above seemed to stretch/fix it with little to no issues.

How it's written for me currently:

.myiframe {
  width: 100%;
  height: 6000px;
  max-height: 100%;
}

<div>
  <a href="javascript:print()">
    <h1>Print</h1>
  </a>
</div>

<iframe class="myiframe" id="myiframe" scrolling="no" src="https://en.wikipedia.org/wiki/Wiki" />

<div>
  The rest of the page
</div>

edited Jul 21 '17 at 02:11

misterManSam

22,389
10
63
82

answered Jul 13 '17 at 14:49

Dead Community

159
1
13

1

It's not doing it for me. So these style elements are in `myiframe` class right? are you printing using the print link and in IE11? – code511788465541441 Jul 13 '17 at 14:55
Yup, clicked the 'Print' redirect and also opened the form in IE11 a couple times to test it. It's strange how they differ. Are you encountering what looks to be the same type of issue, or does it appear any different than before? – Dead Community Jul 13 '17 at 15:04
1

It's almost the same issue except when adding `max-height: 100%` the print out if only 2 pages, one page just has the print link and the other has the iframe. where as without `max-height: 100%`, it prints an extra empty page at the end – code511788465541441 Jul 13 '17 at 15:15
Padding and a lot of other things did not work. Just to be 100% sure we don't have different code some how, can you please paste all the code in your html file in the answer. thanks – code511788465541441 Jul 13 '17 at 16:53
@DrewFarber I am on Windows 10, I can't be not updated to latest IE11. – Vadim Ovchinnikov Jul 20 '17 at 04:27
1

Hi @DrewFarber, I made a small edit to your answer. There is no need to point out edits / additions on answers. They can evolve over time. Leave comments for the comments, they shouldn't be in answers. Answers on Stackoverflow aim to provide useful solutions well into the future so craft your answers with this in mind. Stack snippets are an excellent way to provide working examples in a compact way. and on the multiple answer thing, there was no need for multiple answers because they provide one answer. – misterManSam Jul 21 '17 at 02:27
The code does not work for me either on Windows 10 (IE or Edge). – Maxime Jul 22 '17 at 19:49

Iframe cuts at the bottom when printing in IE

2 Answers2

Linked