The page breaks in the generated PDF document can be controlled using the following CSS properties:
page-break-before : always style forces a page break in PDF right before the box where the element is rendered
page-break-after : always style forces a page break in PDF right after the box where the element is rendered
page-break-inside : avoid style will make the converter to generate the PDF such that the element with this style is not cut between PDF pages if possible.
Below there is a HTML document which demonstrates the usage of the three styles controlling the page breaks in the generated PDF document and the code of a demo application to convert that HTML document to PDF.
<html> <head> <title>Page Breaks Control</title> <style type="text/css"> body { font-family: Times New Roman; font-size: 15px; } </style> </head> <body style="margin: 1px"> <div style="width: 750px"> <table style="page-break-after: always; width: 100%; height: 300px; border: 1px solid black; background-color: #F5F5F5"> <tr> <td style="vertical-align: middle; text-align: center"> A page break will be forced in PDF right after this TABLE element </td> </tr> </table> <br /> This text there is on a new PDF page because a page break was forced right after the TABLE above<br /> <table style="page-break-before: always; width: 100%; height: 300px; border: 1px solid black; background-color: #F5F5F5"> <tr> <td style="vertical-align: middle; text-align: center"> A page break was forced in PDF right before this TABLE element </td> </tr> </table> <br /> <table style="page-break-before: always; width: 100%; border: 1px solid black; background-color: #F5F5F5"> <tr> <td style="page-break-inside: avoid; border: 1px solid black;"> <b>The text inside this table row should not be cut between PDF pages.</b><br /> <br /> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </td> </tr> <!-- ..........--> <tr> <td style="page-break-inside: avoid; border: 1px solid black;"> <b>The text inside this table row should not be cut between PDF pages.</b><br /> <br /> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </td> </tr> </table> </div> </body> </html>
In this demo you learn how to control the page breaks in the generated PDF document using the three CSS styles described above.
private void buttonCreatePdf_Click(object sender, EventArgs e) { // create the HTML to PDF converter HtmlToPdf htmlToPdfConverter = new HtmlToPdf(); // set browser width htmlToPdfConverter.BrowserWidth = int.Parse(textBoxBrowserWidth.Text); Cursor = Cursors.WaitCursor; string pdfFile = Application.StartupPath + @"\DemoOutput\PageBreaksControl.pdf"; try { htmlToPdfConverter.ConvertHtmlToFile(textBoxHtmlCode.Text, textBoxBaseUrl.Text, pdfFile); } catch (Exception ex) { MessageBox.Show(String.Format("Conversion failed. {0}", ex.Message)); return; } finally { Cursor = Cursors.Arrow; } // open the PDF document try { System.Diagnostics.Process.Start(pdfFile); } catch (Exception ex) { MessageBox.Show(String.Format("Conversion succeeded but cannot open '{0}'. {1}", pdfFile, ex.Message)); } }