html2pdf Page Break Fixed in C# (Developer Tutorial)

IronPDF: The C# PDF Library

IronPDF is a flexible, easy-to-use, highly customizable C# PDF Library that allows developers, beginners, or veterans to manipulate and edit PDFs completely. It provides many ways for developers to convert different formats, such as HTML, RTF, and Images, into PDFs and further edit how it is rendered when converting to a PDF. Furthermore, IronPDF utilizes a Chrome rendering engine and, as such, is highly proficient in rendering HTML string, and it allows developers to use CSS styling further to customize the HTML document, giving developers an edge in terms of customization and visual presentation that you won't find anywhere else.

Since the library uses a Chrome rendering engine, what you see is what you get when rendering HTML, which makes it ideal for operations such as creating templates for page breaks so there are no mismatches from the templates. It is precisely how you designed the templates when converting them into PDFs.

Adding Page Break on PDF

To illustrate the library's flexibility and ease of use, we'll use a code example showing how you would add page breaks programmatically.

In this scenario, we'll be using a table-based PDF as the input, and we'll see the difference between adding the page break immediately and after for visual clarity.

// Replace the license key variable with the trial key you obtained
IronPdf.License.LicenseKey = "REPLACE-WITH-YOUR-KEY";

// Replace the license key variable with the trial key you obtained
IronPdf.License.LicenseKey = "REPLACE-WITH-YOUR-KEY";

using IronPdf; // Import the IronPdf library

// Define the HTML content, including a table and an image
const string html = @"
  <table style='border: 1px solid #000000'>
    <tr>
      <th>Company</th>
      <th>Product</th>
    </tr>
    <tr>
      <td>Iron Software</td>
      <td>IronPDF</td>
    </tr>
    <tr>
      <td>Iron Software</td>
      <td>IronOCR</td>
    </tr>
  </table>
  <div style='page-break-after: always;'> </div> 
  <img src='https://ironpdf.com/img/products/ironpdf-logo-text-dotnet.svg'>";

// Create an instance of ChromePdfRenderer
var renderer = new ChromePdfRenderer();

// Render the HTML content into a PDF
var pdf = renderer.RenderHtmlAsPdf(html);

// Save the PDF as "Page_Break.pdf"
pdf.SaveAs("Page_Break.pdf");

using IronPdf; // Import the IronPdf library

// Define the HTML content, including a table and an image
const string html = @"
  <table style='border: 1px solid #000000'>
    <tr>
      <th>Company</th>
      <th>Product</th>
    </tr>
    <tr>
      <td>Iron Software</td>
      <td>IronPDF</td>
    </tr>
    <tr>
      <td>Iron Software</td>
      <td>IronOCR</td>
    </tr>
  </table>
  <div style='page-break-after: always;'> </div> 
  <img src='https://ironpdf.com/img/products/ironpdf-logo-text-dotnet.svg'>";

// Create an instance of ChromePdfRenderer
var renderer = new ChromePdfRenderer();

// Render the HTML content into a PDF
var pdf = renderer.RenderHtmlAsPdf(html);

// Save the PDF as "Page_Break.pdf"
pdf.SaveAs("Page_Break.pdf");

Controlling Page Breaks with CSS

Since IronPDF can be customized with CSS, as it uses a Chrome rendering engine, we can take advantage of this and use CSS to add page breaks to specific elements and page breaks inside them, as well as specify which element shouldn't have a page break within it.

For example, although in the image above, the page break occurs after the table, there might be times when it happens within the table due to clutter.

To avoid that, we can use specific CSS styling for the node and specify that we do not want to add a page break inside.

<div style='page-break-inside: avoid'>
 <img src='no-break-me.png'>
</div>

<div style='page-break-inside: avoid'>
 <img src='no-break-me.png'>
</div>

Adding page-break-inside: avoid prevents page breaks inside the element. However, when doing this operation, ensure that this is applied to the parent div node of the element.

A similar operation can also be used for elements where you want to add a page-break-before style.

<div style="page-break-inside: avoid;">
    <img src="no-break-me.png">
</div>

<div style="page-break-inside: avoid;">
    <img src="no-break-me.png">
</div>

Since we can utilize HTML, we can further specify the elements of the nodes by drilling down the HTML node tree using JavaScript's document.getElementById for selecting the element by its ID and ensure each node is fully customizable.

Optimizing Image Quality and File Size

The page break setting is also closely related to Image Quality. You want to ensure that the page break setting doesn't affect the image quality by shrinking or scaling it on the next page.

As such, we can use CSS to ensure the image quality is consistent throughout templates when we apply page breaks.

<div class="no-break">
    <img src="optimized-image.jpg" alt="Optimized Image" style="width:100%; height:auto;">
</div>

<div class="no-break">
    <img src="optimized-image.jpg" alt="Optimized Image" style="width:100%; height:auto;">
</div>

The CSS styling above ensures the image is consistent after page break operations. We first set the width to 100% of the page, and the height can be auto-scaled to maintain aspect ratio.

Furthermore, IronPDF has additional rendering options when handling HTML, which are similar to a user's printing settings for downloadable printable PDF prompts. For a complete list of attributes, please refer to the API documentation.

Counterpart using JavaScript

Since IronPDF has the advantage of using a Chrome rendering engine, it also comes with a Node.js version that allows developers from various backgrounds to utilize this powerful library.

With the Node.js variant, developers have even more fine-tuned control over adding page breaks, as you have access to promise-based usage and methods, such as the onRejected promise method for debugging or progress tracking and its intermediate functions as well.

Compared to a common library like html2pdf with its jsPDF object's output method, IronPDF is more flexible and supports multiple languages, allowing developers with different language expertise to work on the same project.

Conclusion

Understanding how to use page breaks and how CSS affects the overall HTML is crucial in creating presentable and visually appealing documents for users. It allows readers to segregate the information they are reading to avoid information overload and confusion. Throughout this article, we talked about utilizing the powerful Chrome rendering engine that IronPDF uses to create page break templates automatically for templates and automation, streamlining the efficiency and scalability when creating these documents as well as reducing the risk of human error.

For developers who would like to try IronPDF, the library offers a free trial for $799 and upwards.