Print HTML with Page Breaks

Recently I was working on a project where I needed to print multiple forms at once. The catch was, each form contained data related to a separate person in the organization and so data for user 1 could not be printed on the same page as data for user 2 etc.

To complicate matters, there were multiple form types depending on the action, and the amount of data related to the action could vary depending on the number of managers that commented on the activity.

This created a scenario where you were unable to force a form to the next page using a repeating list of <br>'s or any other method using html. Enter CSS page-break-before & page-break-after. This little nugget allows you to force a page break before or after the element to which it is applied.

In my CSS, I simply created a new class block and applied the style to it:

.end_user_data {
page-break-after: always;
}

With the CSS in place, I updated my HTML and included a new div tag after then end of each user block in my HTML. The updated HTML looked like this:

<div class="user_data_block">
<span>First Name: Fred</span>
<span>Last Name: Flintstone</span>
<span>Street: 101 Brontosaurus Lane</span>
<span>City: Bedrock</span>
<span>State: CA</span>
<span>Zip: 90210</span>
</div>
<div class="end_user_data"></div>
<div class="user_data_block">
<span>First Name: Barney</span>
<span>Last Name: Rubble</span>
<span>Street: 105 Brontosaurus Lane</span>
<span>City: Bedrock</span>
<span>State: CA</span>
<span>Zip: 90210</span>
</div>
<div class="end_user_data"></div>

As the as the output spooled to the printer, each users information is printed starting on a new page.

I hope some of you out there find this little nugget useful, I know my team and I sure did.