Question

我正在使用ui-grid版本v3.2.9。我的目标是打印已在UI中呈现的数据我的桌子由div组成，使用角度ui网格我的方法是： -

打开一个新窗口，我在其中附加网格的HTML。然后调用window.print（）方法打印新打开的窗口的所有内容。

但问题是，如果我的网格中有这么多记录，那么我的新打开的窗口中会出现垂直滚动，当我调用window.print（）方法时，它只打印窗口的可见区域而不是全部窗口的内容。这是我的伪代码： -

function print(id){
  var print = document.getElementById(id);  
  var w = window.open("", "");  
  var headContent = document.getElementsByTagName('head')[0].outerHTML;  
  var writeMe = ('<html><body><head>' + headContent + '</head>');  
  writeMe += (print.outerHTML);  
  writeMe += ('</body></html>');  
  w.document.write(writeMe);  
  w.document.close();  
  w.focus();
  w.setTimeout(function(){
    w.print();
    w.close();
  }, 1000);  
}

所以，任何人都可以建议我可以在代码中改进哪些内容来打印整个窗口的内容。提前谢谢！

Answer 1

请尝试将行或网格上的ID添加为可打印

<head>
    <style type="text/css">

    #printable { display: none; }

    @media print
    {
        #non-printable { display: none; }
        #printable { display: block; }
    }
    </style>
</head>
<body>
    <div id="non-printable">
        Your normal page contents
    </div>

    <div id="printable">
        Printer version
    </div>
</body>

visibleArea的逻辑

function visibleArea(){
     var pwidth = $(window).width();
     var pheight = $(window).height();
        var top = $(this).scrollTop();       
       $("h1").html("total visible area is from:"+ top +" to "+ (pheight + top) +"px"); // add printable id and rest of non-printable

}

如果你有id，那么可以通过id传递

  function printpage(){
    var originalContents = document.body.innerHTML;
    var printReport= document.getElementById('div1').innerHTML;
    document.body.innerHTML = printReport;
    window.print();
    document.body.innerHTML = originalContents;
}

Answer 2

您始终可以使用媒体查询来解决此类问题

$('.shiftTabs .tab-pane.in:not(.active)').addClass('active');

此CSS仅适用于打印命令，因此@media only print { #idOfYourDiv { width: auto; height: auto; overflow: visible; } }将解决您的问题

打印UI Grid的数据

2 个答案: