Syed Khan Syed Khan - 3 months ago 12
HTML Question

HTML printing limit 1 page only

I am printing an HTML table, it varies in length. When printing table, it may print 1 page to 10 pages. Is there any way to limit printing to 1 page only using programming code? Yes there is an option in browser print dialog to set printing for 1 page only (this is last option to opt)

printing HTML using window.print() method

Answer

You could try setting some print CSS like this:

@media print {

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

}

The basic idea is to have the page just 100% height and hide the overflow. This should also allow to show only content of the height of 100% of the page = one page.

EDIT:

Based on your comment you could probably show for example five different tables on separate tables like this:

@media print {

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

}

The page-break-after will tell the browser to make a page break after each table. In this case you need to discard the CSS styles set above for html and body. Also each table is limited to 100% height of a page.

It's hard to include an example in these snippets iframes but here's a code you can try it with if you just save it as a html file.

<!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>