Menu
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
813
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)
124
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
