Insert Page Breaks in PDF Using CSS in HTML

EVO PDF Client for .NET Documentation

You can force page breaks in PDF using the page-break-before:always and page-break-after:always CSS attributes in HTML elements styles. The page-break-before:always attribute will force a page break right before the position in PDF page where the element would be normally rendered and the page-break-after:always will force a page break right after the position in PDF page where the element would be normally rendered.

Code Sample - Insert Page Breaks in PDF Using CSS in HTML

Copy

protected void convertToPdf()
{
    // Get the server IP and port
    String serverIP = textBoxServerIP.Text;
    uint serverPort = uint.Parse(textBoxServerPort.Text);

    // Create a HTML to PDF converter object
    HtmlToPdfConverter htmlToPdfConverter = null;
    if (radioButtonUseTcpService.Checked)
        htmlToPdfConverter = new HtmlToPdfConverter(serverIP, serverPort);
    else
        htmlToPdfConverter = new HtmlToPdfConverter(true, textBoxWebServiceUrl.Text);

    // Set optional service password
    if (textBoxServicePassword.Text.Length > 0)
        htmlToPdfConverter.ServicePassword = textBoxServicePassword.Text;

    // Set license key received after purchase to use the converter in licensed mode
    // Leave it not set to use the converter in demo mode
    htmlToPdfConverter.LicenseKey = "4W9+bn19bn5ue2B+bn1/YH98YHd3d3c=";

    // Set an adddional delay in seconds to wait for JavaScript or AJAX calls after page load completed
    // Set this property to 0 if you don't need to wait for such asynchcronous operations to finish
    htmlToPdfConverter.ConversionDelay = 2;

    byte[] outPdfBuffer = null;

    if (convertHtmlRadioButton.Checked)
    {
        string htmlWithForm = htmlStringTextBox.Text;
        string baseUrl = baseUrlTextBox.Text;

        // Convert the HTML string with page-break-before:always and page-break-after:always styles to a PDF document in a memory buffer
        outPdfBuffer = htmlToPdfConverter.ConvertHtml(htmlWithForm, baseUrl);
    }
    else
    {
        string url = urlTextBox.Text;

        // Convert the HTML page with page-break-before:always and page-break-after:always styles to a PDF document in a memory buffer
        outPdfBuffer = htmlToPdfConverter.ConvertUrl(url);
    }
}

HTML with page-break-before:always and page-break-after:always CSS Attributes

XML

Copy

<!DOCTYPE html>
<html>
<head>
    <title>Insert Page Breaks Before and After HTML Elements Using CSS</title>
</head>
<body style="width: 1010px; font-family: 'Times New Roman'; font-size: 20px; margin: 5px">
    <div style="width: 100%; height: 500px; background-color: aliceblue; border: 2px solid gray; text-align: center">
        <div style="width: 100%; height: 200px"></div>
        A block <b>without any page break</b> style<br />
        <br />
        [ Follows a block with <i>page-break-before : always</i> and <i>page-break-after : always</i> styles ]
    </div>
    <div style="page-break-before: always; page-break-after: always; width: 100%; height: 500px; background-color: gainsboro; border: 2px solid gray; text-align: center">
        <div style="width: 100%; height: 200px"></div>
        A block with <b>page-break-before : always</b> and <b>page-break-after : always</b> styles<br />
        <br />
        <b>This block will be always rendered alone in a PDF page</b><br />
        <br />
        [ Follows a block with <i>page-break-after : always</i> style ]
    </div>
    <div style="page-break-after: always; width: 100%; height: 500px; background-color: beige; border: 2px solid gray; text-align: center">
        <div style="width: 100%; height: 200px"></div>
        A block with <b>page-break-after : always</b> style<br />
        <br />
        <b>Nothing will be rendered after this block in PDF page</b>
        <br />
        <br />
        [ Follows a block <i>without any page break</i> style ]
    </div>
    <div style="width: 100%; height: 500px; background-color: aliceblue; border: 2px solid gray; text-align: center">
        <div style="width: 100%; height: 200px"></div>
        A block <b>without any page break</b> style<br />
        <br />
        [ Follows a block with <i>page-break-before : always</i> style ]
    </div>
    <div style="page-break-before: always; width: 100%; height: 500px; background-color: lightgray; border: 2px solid gray; text-align: center">
        <div style="width: 100%; height: 200px"></div>
        A block with <b>page-break-before : always</b> style<br />
        <br />
        <b>This block will always be rendered at the top of a PDF page</b>
    </div>
</body>
</html>