html - css 打印媒体查询只打印第一页

Question

我使用 Print Media Query 在我的网页上打印一个可滚动的 DIV(主 DIV 包含一个子 DIV 和包含多行的表格以及来自 kendo 网格的自定义样式)。 window.Print() 仅在 IE 9 和 Chrome 中打印一页，并切掉其余的 DIV 内容。我如何确保它在多页中打印所有内容。我阅读了有关 Firefox 问题的类似帖子，但使用 overflow: visible !important 的解决方案对我不起作用。以下是我的风格

注意:我试过使用 position: absolute、height/width: 100% 并为 Table、TBody、TR 和 TD 设置与下面相同的设置，但没有用。

@media print {

body * {
    visibility: hidden;
  }

#divname, #divname* {
    visibility: visible;
  }

#divname
    {
        overflow: visible !important; 
        float:none !important;
        position: fixed;
        left: 0px;
        top: 0px;
        display:block !important;
        /*height:auto !important;*/
    }
}

编辑:我终于设法通过从 DOM 读取来打印，如下所示。以防万一，如果对某人有帮助

    `//get DIV content as clone
    var divContents = $("#DIVNAME").clone();
    //detatch DOM body
    var body = $("body").detach();
    //create new body to hold just the DIV contents
    document.body = document.createElement("body");
    //add DIV content to body
    divContents.appendTo($("body"));
    //print body
    window.print();
    //remove body with DIV content
    $("html body").remove();
    //attach original body
    body.appendTo($("html"));`

有了这个，您可以在重新绑定(bind)后保留与页面上的控件关联的客户端事件。

Answer 1

试试这个: 编辑:使用绝对位置。意识到 position:fixed 只创建一个页面，因为它就是这样工作的(你不能用 position:fixed 滚动)。 Absolute 做同样的事情，但它是可扩展的。

@media print {
    body * {
        visibility: hidden;
    }
    #divname, #divname * {
        visibility: visible;
    }
    #divname {
        left: 0px;
        top: 0px;
        position:absolute;
    }
    p {
        page-break-before: always;
    }
}
.para {
    font-size:x-large;
    height:3000px;
}