Question

我想用javascript函数window.print()

打印网页

页面包含带滚动条的div

但是打印只显示div的一部分

我尝试添加到css

@media print
{
 .myDiv
  { 
    height:100%;
  }

}

但它不起作用，

我希望在没有滚动条的情况下显示所有div内容我是怎么做到的？

Answer 1

此方法可让您打印任意div。

使用jQuery：

function print(selector) {
    var $print = $(selector)
        .clone()
        .addClass('print')
        .prependTo('body');

    //window.print() stops JS execution
    window.print();

    //Remove div once printed
    $print.remove();
}

还有一些CSS：

body, html {
    width: 100%;
    height: 100%;
}

.print {
     position: fixed;
     overflow: auto;
     width: 100%;
     height: 100%;
     z-index: 100000; /* CSS doesn't support infinity */

     /* Any other Print Properties */
}

Answer 2

试试这个

注意：不要给div添加内联样式

  <head>
    <style type="text/css">
    .result{ height:200px;overflow:auto;}
    </style>
    <style type="text/css" media="print">
    @media print{ .result{ height:100%;overflow:visible;} } 
    </style>
    <title></title>
  </head>
  <body>
    <div class="result">
      content goes here..
    </div>
    <form>
      <input type="button" value="print" onclick="window.print();" />
    </form>
  </body>

Answer 3

这是使用javascript打印div内容的代码。

 <script language="javascript" type="text/javascript">
    function printDiv(divID) {
        //Get the HTML of div
        var divElements = document.getElementById(divID).innerHTML;
        //Get the HTML of whole page
        var oldPage = document.body.innerHTML;

        //Reset the page's HTML with div's HTML only
        document.body.innerHTML = 
          "<html><head><title></title></head><body>" + 
          divElements + "</body>";

        //Print Page
        window.print();

        //Restore orignal HTML
        document.body.innerHTML = oldPage;


    }
</script>


<div id="printme" style="width: 100%; background-color: Blue; height: 200px">
    Print me I am in 1st Div
</div>   
<input type="button" value="Print" onclick="javascript:printDiv('printme')" />

window.print（）打印所有div内容而不滚动条

3 个答案: