在使用CSS,JavaScript和PHP的情况下,如何限制HTML表格的打印页面中的特定行数

问题描述 投票:1回答:1

我正在使用javascript函数打印表格

<script type="text/javascript" >
function printpreview(divId) {
    var content = document.getElementById(divId).innerHTML;
    var mywindow = window.open('', 'Print', 'height=600,width=800');    

    mywindow.document.write('<html><head><title>Print</title>');
    mywindow.document.write('</head><body>');
    mywindow.document.write('<div align="center"><h2> MANAGEMENT</h2></div>');
    mywindow.document.write('<div align="center"><h3>Sales Records</h3></div>');
    mywindow.document.write("<link rel=\"stylesheet\" href=\"/public/css/style.css\" 
    type=\"text/css\"/>");
    mywindow.document.write(content);
    mywindow.document.write('<p style="color: #5B5745; font-family:verdana; font-size:11px; font-style:normal; font-weight:bold;">' );
    mywindow.document.write('</body></html>');
    mywindow.document.close();
    mywindow.focus();
    mywindow.print();
    mywindow.close();
}

我正在使用下面的代码在我的打印页面中使用页脚

mywindow.document.write('<div class="footer-text">Copyright 2019 Resource Planing System. All rights reserved.</div></p> </div>');

css是

.footer-text { 
    position: fixed;
    bottom: 0;
}

但是我的页脚页面与上面的表格重叠,现在要避免这种情况,我想限制每页打印的某些特定行数,任何人都可以帮助我如何限制每页打印的行数,我尝试了以下方法代码,但仅适用于IE,而不适用于chrome。我需要铬的解决方案

@media print  {            
    tr:nth-of-type(n){
        page-break-after:always;
    }
}
javascript php css
1个回答
0
投票

如果问题确实出在如何使页脚始终位于页面的底部,而其他内容不会受到干扰,那么您可以使用a sticky footer轻松实现sticky footer

[我整理了一个快速演示〜观察到flexboxes元素保留在页面的最底部,其他任何内容都不会影响它或使其重叠/模糊,这是我所希望的。

(忽略表的内容-它只是虚拟数据的混合,以“充实” HTML表以供显示)

这项工作的关键是将flexboxes分配给页眉和页脚不具有此元素的footer元素。所有这三个值的其他值都可能会进一步更改布局-也许转到flex:1可能会有帮助?!

[我添加了一个按钮,用于插入HTML表的克隆,因此您可以看到,尽管所有其他内容,该页脚仍是底部的页脚。

祝你好运

main
© www.soinside.com 2019 - 2024. All rights reserved.