在使用 css、javascript 和 ZE1BFD762321E409CEEZ4AC0B66 时，我如何限制 HTML 表的打印页面中的特定行数

Question

我正在使用 javascript function 打印表格

<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。 我需要 chrome 中的解决方案

@media print  {            
    tr:nth-of-type(n){
        page-break-after:always;
    }
}

Answer 1

如果问题真的更多是如何在页面底部始终有一个其他内容不会干扰的页脚，那么您可以使用flexboxes非常轻松地实现一个sticky footer 。

我整理了一个快速演示〜观察footer元素保留在页面的最底部，并且没有其他内容会影响它或重叠/遮盖它，我认为这正是您所希望的。

（忽略表格的内容 - 它只是混合虚拟数据来“充实” HTML 表格以进行显示）

这个工作的关键是将flex:1分配给 header 和页脚没有这个的main元素。 所有这三个值的其他值都可以进一步改变布局 - 也许使用 Flexbox可能会有所帮助？！

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

祝你好运

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title>Basic Flexbox: Sticky Footer</title>
        <style>
            body{ display:flex; flex-direction:column; height:100vh; box-sizing:border-box; margin:0; padding:0; font-family:monospace }

            main, header, footer{ display:flex; flex-direction:column; width:100%; margin:auto; }

            header{ order:1; align-items:center; justify-content:center; background:rgba(0,0,200,0.1); }
            main{ order:2; flex:2; align-items:flex-start; justify-content:flex-start; background:rgba(0,200,0,0.1) }
            footer{ order:3; align-items:center; justify-content:center; background:rgba(200,0,0,0.1); }

            table{ margin:1rem; border:1px solid gray; border-collapse:collapse; box-shadow:0 0 10px rgba(0,0,255,0.5) }
            td{ border:1px solid gray }
            table > caption{ margin:auto; background:gray; color:white}

        </style>

    </head>
    <body>
        <header>A meaningful header</header>

        <main>

            <input type='button' value='Add table' />

            <table>
                <caption>A meaningful table showing meaningful stuff</caption>
                <tr>
                    <td>Measurement(s)</td>
                    <td>DNA methylation profiling data • whole genome sequencing assay • bisulfite sequencing assay • transcription profiling assay</td>
                </tr>
                <tr>
                    <td>Technology Type(s)</td>
                    <td>DNA methylation profiling assay • DNA sequencing • RNA sequencing</td>
                </tr>
                <tr>
                    <td>Factor Type(s)</td>
                    <td>age • sex • smoking status</td>
                </tr>
                <tr>
                    <td>Sample Characteristic - Organism</td>
                    <td>Homo sapiens</td>
                </tr>

                <tr>
                    <td colspan=2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p></td>
                </tr>
                <tr>
                    <td colspan=2><p>Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh.</p></td>
                </tr>
                <tr>
                    <td colspan=2><p>Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna.</p></td>
                </tr>
                <tr>
                    <td colspan=2><p>Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet.</p></td>
                </tr>
            </table>
        </main>

        <footer>Copyright 2019 Resource Planning System. All rights deserved, all wrongs reversed.</footer>
        <script>
            document.querySelector('[type="button"]').addEventListener('click',(e)=>{
                e.target.parentNode.appendChild( e.target.parentNode.querySelector('table').cloneNode( true ) )
            })
        </script>
    </body>
</html>

在使用 css、javascript 和 ZE1BFD762321E409CEEZ4AC0B66 时，我如何限制 HTML 表的打印页面中的特定行数

问题描述

1 个解决方案

解决方案1
0 2019-10-31 14:45:47

在使用 css、javascript 和 ZE1BFD762321E409CEEZ4AC0B66 时，我如何限制 HTML 表的打印页面中的特定行数

问题描述

1 个解决方案

解决方案1 0 2019-10-31 14:45:47

解决方案1
0 2019-10-31 14:45:47