Question

我有一些iframe内容有分页类。但它确实在打印时打破了页面。这是html和js代码：

<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>

和css是：

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

它在firefox中工作正常。但它会在chrome中产生问题。 Page未按预期破坏。如果我在新标签中打开iframe的src，它会在两个浏览器中打印得很漂亮。不知道机智iframe有什么问题？

Answer 1

Chrome的分页符分析说明与其他浏览器的解析方式不同。

将其放在一个竞争者<div>标记中，并将iframe放在其下。

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

更多信息：https://stackoverflow.com/a/1647062/2713582

Answer 2

尝试编写内联css或内联样式。例如：

<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>

chrome中iframe内容的分页符

2 个答案: