Question

我正在打印HTML表格，它的长度各不相同。打印表时，可打印1页到10页。有没有办法只使用编程代码将打印限制为1页？是的浏览器打印对话框中有一个选项，仅设置1页打印（这是选择的最后一个选项）

使用window.print（）方法打印HTML

Answer 1

您可以尝试设置一些这样的打印CSS：

@media print {

  html, body {
    height:100%; 
    margin: 0 !important; 
    padding: 0 !important;
    overflow: hidden;
  }

}

基本思路是让页面高度仅为100％并隐藏溢出。这也应该只允许显示页面100％高度的内容=一页。

修改

根据您的评论，您可能会在不同的表格中显示五个不同的表格，如下所示：

@media print { table { /* Or specify a table class */ max-height: 100%; overflow: hidden; page-break-after: always; } }

page-break-after将告诉浏览器在每个表之后进行分页。在这种情况下，您需要放弃上面为html和body设置的CSS样式。此外，每张桌子的页面高度限制为100％。

在这些片段iframe中包含一个示例很难，但如果您将其保存为html文件，则可以尝试使用此代码。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> table { width: 100%; border: 2px solid black; } @media print { table { max-height: 100%; overflow: hidden; page-break-after: always; } } </style> </head> <body> <table> <tr> <td> <h2>Table 1</h2> </td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> </table> <table> <tr> <td> <h2>Table 2</h2> </td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> </table> <table> <tr> <td> <h2>Table 3</h2> </td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> </table> </body> </html>

编辑2：

IE似乎在上面的例子中遇到了麻烦，因为它总是遇到常识问题。您可以包含IE特定的修复程序或在所有浏览器上设置这些修复程序，但这里也是IE的一个工作示例。这里最重要的是使用@page属性和它的大小+边距。我现在没时间看时间，但希望这对你有帮助。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> html, body { margin: 0; padding: 0; } * { box-sizing: border-box; } table { cell-padding: 0; cell-spacing: 0; width: 100%; border: 2px solid black; } @page { size: A4; margin: 0; } @media print { table { max-height: 100% !important; overflow: hidden !important; page-break-after: always; } } </style> </head> <body> <table> <tr> <td> <h2>Table 1</h2> </td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> </table> <table> <tr> <td> <h2>Table 2</h2> </td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> </table> <table> <tr> <td> <h2>Table 3</h2> </td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> <tr> <td>Content</td> </tr> </table> </body> </html>

Answer 2

以下是演示在打印页面中滚动的简单代码。如果将高度设置为：100％，则将打印一页，如果将高度设置为：200％，则将打印两页，依此类推，最好的解决方案是在要移动到新页面的div上提供分页符。

<html>
    <head>
        <style>
            @media print {
                .parent {
                    overflow: scroll;
                    display: block;
                }
                .pb_after  { page-break-after: always !important; }
            }    
        </style>
        <script>
            setTimeout(function() {
                window.print();
            }, 3000);
        </script>
    </head>
    <body>
        <div class="parent">
            <div class="pb_after">
                Amit
            </div>
            <div>
                Parrikar
            </div>
        </div>
    </body>
</html>

HTML打印限制仅限1页

2 个答案: