page break for iframe content in chrome

Question

I have some iframe content having page-break classes. But it does break the pages while printing. Here is the html and js codes:

<html>
<head>
    <script src="js/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $(".testprint").on('click', function(){
            document.getElementById('test').contentWindow.print();
            return false;
        });


    });
    </script></head>
<body>
    <iframe id="test" width="800px" height="500px" src="printjobs.php?day=2014-06-13&drivers=1,2,49,24&maps=&directions="></iframe>
    <a class="testprint" href="#">Print</a>
</body>
</html>

and css is :

    div.page-break { page-break-after:always !important;}

It works fine in firefox. But it creates problem in chrome. Page is not breaking as expected. If I open the src of iframe in new tab it prints beautifully in both the browsers. Not sure what's wrong wit iframe?

score 1 · Answer 1 · edited May 23 '17 at 11:49

1

Chrome's page-break instructions are parsed differently from the other browsers.

Put it in a conteiner <div> tag, and the iframe under it.

<div style='page-break-after:always; width:100%; height:100%'>
      <iframe>
      ...
      </iframe>
</div>

Further info: https://stackoverflow.com/a/1647062/2713582

edited May 23 '17 at 11:49

Community

1
1

answered Jun 17 '14 at 13:24

Eric Wu

908
12
35

I have so many page breaks in iframe content which is getting loaded from given src. – Sandeep Gupta Jun 17 '14 at 14:19

score 0 · Answer 2 · answered Jan 09 '15 at 10:52

Try Writing inline css or inline style. For Example:

<html>
    <head>
        <script src="js/jquery.min.js"></script>
        <script>
        $(document).ready(function(){
            $(".testprint").on('click', function(){
                document.getElementById('test').contentWindow.print();
                return false;
            });


        });
        </script></head>
    <body>
        <iframe id="test" width="800px" height="500px" src="printjobs.php?day=2014-06-13&drivers=1,2,49,24&maps=&directions="></iframe>
        <a class="testprint" href="#">Print</a>
<div id="test">
<style>
@media print{
p.break{
page-break-before:always;
}
</style>
<p>Content</p>
<p class="break"></p>
<p>Content</p>
<p style="page-break-before:always;"></p>
<p>Content</p>
<p class="break"></p>
<p>Content</p>
<p style="page-break-before:always;"></p>
</div>
</body>
</html>

page break for iframe content in chrome

2 Answers2