JIYIK CN >

This article will introduce several ways to force page breaks when printing HTML content.

Set the page-break-after property to always Inside @media print to Page Break in HTML

The @media print rule of CSS lets us apply rules when printing HTML content. We can change the style using this rule.

We can use JavaScript to create an onclick()event to print the specified HTML content. The window.print() method prints the current window.

We can use onclick()the event to call this method.

In CSS, using @media print, we can set the page-break-after property to always so that the HTML element starts breaking at that point.

For example, create two headings using the h1 tag. Name the first heading Before Page Break and the other After Page Break.

Give the first heading a class name of break-page. Then create a button Print and add an onclick listener to the button and call the window.print() method.

Select the pagination class in the @media print rule in the CSS section. Next, set its page-break-after property to always.

The following example shows that when we click the print button, the title before the page break appears on the first page, and the second title and button appear on the second page when printing. We can use the page-break-after property to break pages when printing HTML.

Sample code:

<h1 class="break-page">Before page break </h1>
<h1>After page break</h1>
<button onclick="window.print()">Print</button>
@media print {
    .break-page {
        page-break-after: always;
    }
}

Set the page-break-before property to always Inside @media print to Page Break in HTML

This method is very similar to the previous one. The difference is that we are using the page-break-before property.

It @mediais used similarly in the print rules. This method breaks the page before the HTML content, where we use the page-break-before property.

For example, create two headings like in the first method. This time, give the second heading the class name break-page.

Next, create a window.print()button with an onclick listener that calls the method. In the CSS section @media print, select the break-page class and set its page-break-before property to always.

The page break will appear before the second heading and after it when you click the Print button.

Sample code:

<h1>Before page break </h1>
<h1 class="break-page">After page break</h1>
<button onclick="window.print()">Print</button>

@media print {
    .break-page {
        page-break-before: always;
    }
}

Set the break-after property to pagination to break pages in HTML

We can set the break-after attribute of an element to page to break pages in HTML. It will break the page after the element on which the attribute is used.

window.print()We can then use printHTML page just like the above method . This method is different from the above method because it does not use @media print rule.

For example, create two headings as usual. Between the headings, create an empty div and give it a class name of break-page.

Next, window.print()create a clickable button with an onclick listener that calls the method.

Select the break-page class and set its break-after property to page in CSS.

When printing, the page breaks after the first title. In this way, we can use the break-after attribute in HTML to break the page.

Sample code:

<h1>
Before page break
</h1>
<div class="break-page"></div>
<h1>
After page break
</h1>
<button onclick="window.print();" />Print</button>
.break-page {
    break-after: page;
}