Insert Page Breaks in PDF Using CSS in HTML

EVO HTML to PDF Converter 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 convertToPdfButton_Click(object sender, EventArgs e)
{
    // Create a HTML to PDF converter object with default settings
    HtmlToPdfConverter htmlToPdfConverter = new HtmlToPdfConverter();

    // 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);
    }

    // Send the PDF as response to browser

    // Set response content type
    Response.AddHeader("Content-Type", "application/pdf");

    // Instruct the browser to open the PDF file as an attachment or inline
    Response.AddHeader("Content-Disposition", String.Format("attachment; filename=Insert_Page_Breaks_Before_After_HTML_Elements_Using_CSS.pdf; size={0}", outPdfBuffer.Length.ToString()));

    // Write the PDF document buffer to HTTP response
    Response.BinaryWrite(outPdfBuffer);

    // End the HTTP response and stop the current page processing
    Response.End();
}

Protected Sub convertToPdfButton_Click(ByVal sender As Object, ByVal e As EventArgs)
    ' Create a HTML to PDF converter object with default settings
    Dim htmlToPdfConverter As New HtmlToPdfConverter()

    ' 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

    Dim outPdfBuffer() As Byte = Nothing

    If convertHtmlRadioButton.Checked Then
        Dim htmlWithForm As String = htmlStringTextBox.Text
        Dim baseUrl As String = 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
        Dim url As String = 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)
    End If

    ' Send the PDF as response to browser

    ' Set response content type
    Response.AddHeader("Content-Type", "application/pdf")

    ' Instruct the browser to open the PDF file as an attachment or inline
    Response.AddHeader("Content-Disposition", String.Format("attachment; filename=Insert_Page_Breaks_Before_After_HTML_Elements_Using_CSS.pdf; size={0}", outPdfBuffer.Length.ToString()))

    ' Write the PDF document buffer to HTTP response
    Response.BinaryWrite(outPdfBuffer)

    ' End the HTTP response and stop the current page processing
    Response.End()
End Sub

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>