iframe content gets cut off when printing

前端未结

关注

 5  964

I have a page with an iframe in it. The iframe\'s content is a couple of pages long, I\'ve set the iframe\'s height to match it\'s content. When I try to print the page, the

相关标签:

5条回答

孤城傲影

2021-01-05 12:21

Here is a simple solution using javascript to manipulate the DOM and set the current window to equal the iframe's window, then issue the print command.

<html>
<body>

<iframe id='first_iframe' src="xxx" style="width:718px; height:700px;" frameborder="0"></iframe>

<iframe id='second_iframe' src="yyy" style="width:718px; height:700px;" frameborder="0"></iframe>

</body>
</html>

<script>

 pages =[] // initiate an empty list 

function printPage() {


var frame1 = document.getElementById('first_iframe');
// get the first_iframe and
// then push its innerHTML into the list
   pages.push(frame1.contentWindow.document.body.innerHTML); 


var frame2 = document.getElementById('second_iframe');
// get the first_iframe and
// then push its innerHTML into the list
   pages.push(frame1.contentWindow.document.body.innerHTML); 


if (pages && pages.length) {

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

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


}
</script>

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

With this solution you avoid the problem of the iframe being cut off if it exceeds one page. Secondly, you get only one print dialogue box even if you have multiple iframes.

0 讨论(0)

北荒

2021-01-05 12:30
If you place the iFrame inside of a div it should set the div height to the height of the iFrame and I believe that this could solve your issue.

i.e.
```
<div>
    <iFrame></iFrame>
</div>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

抹茶落季

2021-01-05 12:31

This source from 2012 says you can detect print requests in IE 5+, Firefox 6+, Chrome 9+, and Safari 5.1+ (Opera didn't work).

(function() {
    var beforePrint = function() {
        console.log('Functionality to run before printing.');
    };
    var afterPrint = function() {
        console.log('Functionality to run after printing');
    };

    if (window.matchMedia) {
        var mediaQueryList = window.matchMedia('print');
        mediaQueryList.addListener(function(mql) {
            if (mql.matches) {
                beforePrint();
            } else {
                afterPrint();
            }
        });
    }

    window.onbeforeprint = beforePrint;
    window.onafterprint = afterPrint;
}());

Having caught the events you can then do something special for your iframe where it says

console.log('Functionality to run before printing.');

0 讨论(0)

慢半拍i

2021-01-05 12:32
The best thing to do is to put something under the iframe but that has no text in it. So something like this:
```
...
iframe code here
<a href="#"> </a>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

醉梦人生

2021-01-05 12:40

Just an idea: Do a focus on your ifame before print:

var myf = document.getElementById("myiframe");
var contentWindow = myf.contentWindow;
contentWindow.focus();
contentWindow.print();

0 讨论(0)