css打印媒体查询仅打印第一页 [英] css print media query prints only first page

问题描述

我使用打印媒体查询在我的网页上打印一个可滚动的DIV（主DIV包含一个子DIV和包含多行的表格以及来自kendo网格的自定义样式）。 window.Print（）只打印一个页面在IE 9和Chrome切割其余的DIV内容。我如何确保它打印多个页面中的所有内容。我读了类似的帖子的问题与Firefox但解决方案使用overflow：visible！important没有为我工作。下面是我的风格

I use Print Media Query to print a scrollable DIV on my webpage (Main DIV contains a sub DIV and table with several rows and custom styles from kendo grid). The window.Print() only prints one page in both IE 9 and Chrome chopping rest of the DIV contents. How would I make sure it prints all contents in multiple pages. I read similar posts for issue with Firefox but the solution of using overflow: visible !important did not work for me. Below is my style

注意：我已经尝试过位置：absolute，height / width：100％，并设置如下表，TBody，TR和TD ，但没有使用。

Note: I've tried with position: absolute, height/width: 100% and setting same settings as below for Table, TBody, TR and TD, but no use.

@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阅读打印如下。如果它帮助某人

I finally managed to print by reading from DOM like below. In case, if it helps someone

    `//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"));`

$ b

With this, you can retain the client side events associated to the controls on page after rebinding.

推荐答案

使用此方法，您可以在重新绑定后的页面上保留与控件关联的客户端事件。这：
编辑：使用位置绝对。实现的位置：固定只创建一个页面，因为它是如何工作（你不能滚动与位置：固定）。绝对是一样的，但是是可扩展的。

Try this: edit: using position absolute. Realized that position:fixed only creates one page since thats how it works (you cannot scroll with position:fixed). Absolute does the same thing but is expandable.

@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;
}

这篇关于css打印媒体查询仅打印第一页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！