11

I am printing an HTML table that 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 the browser print dialog to set printing for 1 page only (this is last option to opt).

I'm printing the HTML using window.print() method.

MarredCheese
  • 17,541
  • 8
  • 92
  • 91
Syed Khan
  • 231
  • 1
  • 4
  • 13
  • Related: http://stackoverflow.com/questions/3341485/how-to-make-a-html-page-in-a4-paper-size-pages – cbp Aug 29 '16 at 12:24

2 Answers2

30

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>

EDIT 2:

IE seems to have trouble with the above examples as it has always trouble with the common sense. You can include IE specific fixes or set these on all browsers but here's a working example also for IE. The main thing here is to play with the @page attribute and it's size + margins. I don't have the time to look at this with time right now but hopefully this helps you.

<!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>
thepio
  • 6,193
  • 5
  • 35
  • 54
  • This is on the right path, but won't work as parts of the table will be hidden – cbp Aug 29 '16 at 12:22
  • 1
    Oh, so you mean somehow it should fit the table into one page on print? **EDIT**: Sorry, you're not actually the OP of the question which I missed earlier. That's why I had a follow-up question to you. I mean if the table is 10 pages long it's kind of impossible to fit it in one page. I assumed from the question that the OP wants to limit the length of the print to one page, no matter if content is hidden etc. – thepio Aug 29 '16 at 12:23
  • yes @thepio you are right, I only want to limit print to 1 page, same as print dialog limit to print page number 1 only, that works fine, thanks – Syed Khan Aug 29 '16 at 12:29
  • 1
    @SyedKhan Ok, nice to hear :) – thepio Aug 29 '16 at 12:30
  • also please tell me, is there a way to limit table content to 1 page? (not html), I mean if there are 5 tables in HTML, then is there any way to print all 5 tables, but each table limited to 1 page? – Syed Khan Aug 29 '16 at 12:31
  • 1
    I edited my answer to include a way to print all tables on separate pages. – thepio Aug 29 '16 at 12:42
  • sorry, but your snippet not working as expected, each table printing complete – Syed Khan Aug 29 '16 at 14:08
  • 1
    Each table is printing completely until it fills 100% of the page (one table is maximum of one page height or under and one table per page no matter how large the tables are)....how would you want it to be then? – thepio Aug 29 '16 at 14:12
  • Thank you for your time, uploaded an image of print dialog, upper part is page 1, and lower part is page 2, you can see, that page 1 prints Table 1, while page 2 also prints remaining part of Table 1, what I expect is page 1 prints Table 1, remaining part is neglected, page 2 prints table 2, remaining part neglects and so on. Link: http://i65.tinypic.com/2vtpsud.png – Syed Khan Aug 29 '16 at 14:19
  • 1
    It's werid because for me my later example works perfectly. Could you have some other CSS declarations that is interfering with my examples CSS? Maybe you could test it by setting `!important` to the CSS declarations? – thepio Aug 29 '16 at 15:02
  • 1
    Please see my second edit. You have to play around with the CSS a little bit. – thepio Aug 29 '16 at 15:12
  • thank you for your time, but seems like I have to leave this. – Syed Khan Aug 29 '16 at 15:26
  • I used this CSS, and it worked fine `.table { max-height:100vh; margin: 0 !important; overflow: hidden; page-break-after: always; }` – Syed Khan Aug 29 '16 at 16:27
1

Following is the simple code that demonstrate scrolling in print pages. If you set height: 100% it will print one page, if height: 200% it will print two pages and so on, best solution is to provide page breaks on div's which you want to move to new pages.

<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>
Amit Prabhu Parrikar
  • 221
  • 3
  • 12