title: Convert HTML Template to PDF using iText 7: how to move a table that prints across pages
body: <p>I'm developing an asp.net mvc project and I'm using an html template to generate an invoice document with dynamic data which I filled up thanks to handlebars. The html resulting is being converted to PDF by using iText 7, since is the tool required by the company for using to, however I'm facing an issue when converting that to a PDF because of an html table that shows data, some times has enough data to fit just into one page, but in other cases, there are many rows that meet into a page break, printing the data across both pages. I need to move the whole table block to the next page whenever the data doesn't fit in one page.</p>
  <p>Here is the template (Mytemplate.html):</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;style type="text/css"&gt;
          &lt;!-- Removed inline styles for space reasons --&gt;
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div style="width: 100%; margin: 0 auto; text-align: center; display: flex; justify-content: center;"&gt;
      &lt;div style="max-width: 700px; background-color: white; width: 100%"&gt;
          &lt;table style="width:100%"&gt;
              &lt;tbody&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      &lt;table class="table-header table-information m-0 border-zero"&gt;
                          &lt;tr&gt;
                              &lt;td class="text-al" style="vertical-align: top"&gt;
                                  &lt;img src="{{baseUrl}}\images\clear_purple.png" style="width: 150px; height: 50px;"&gt;
                              &lt;/td&gt;
                              &lt;td class="text-al" style="vertical-align: top"&gt;
                                  &lt;table class="table-information m-0 border-zero"&gt;
                                      &lt;tbody&gt;
                                          &lt;tr&gt;
                                              &lt;td class="td-information p-0"&gt;
                                                  &lt;p class="text p-0"&gt;Insured: {{insured}}&lt;/p&gt;
                                              &lt;/td&gt;
                                          &lt;/tr&gt;
                                          &lt;tr&gt;
                                              &lt;td class="td-information p-0"&gt;
                                                  &lt;p class="text p-0"&gt;{{facilityName}}&lt;/p&gt;
                                              &lt;/td&gt;
                                          &lt;/tr&gt;
                                      &lt;/tbody&gt;
                                  &lt;/table&gt;
                              &lt;/td&gt;
                              &lt;td class="text-al vertical-ab"&gt;
                                  &lt;table class="table-information m-0 border-zero"&gt;
                                      &lt;tbody&gt;
                                          &lt;tr&gt;
                                              &lt;td class="td-information p-0"&gt;
                                                  &lt;p class="text p-0"&gt;Invoice Period: {{invoicePeriod}}&lt;/p&gt;
                                              &lt;/td&gt;
                                          &lt;/tr&gt;
                                          &lt;tr&gt;
                                              &lt;td class="td-information p-0"&gt;
                                                  &lt;p class="text p-0"&gt;Date sent to LCTI: {{invoiceDateLTCI}}&lt;/p&gt;
                                              &lt;/td&gt;
                                          &lt;/tr&gt;
                                          &lt;tr&gt;
                                              &lt;td class="td-information p-0"&gt;
                                                  &lt;p class="text p-0"&gt;LTCI Rep: {{clientReferrer}}&lt;/p&gt;
                                              &lt;/td&gt;
                                          &lt;/tr&gt;
                                      &lt;/tbody&gt;
                                  &lt;/table&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/table&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      &lt;table class="table-information"&gt;
                          &lt;tbody&gt;
                          &lt;tr class="tr-information"&gt;
                              &lt;th class="td-background" colspan="3"&gt;
                                  &lt;p class="text-title"&gt;Residency Information&lt;/p&gt;
                              &lt;/th&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;td class="td-information p-0 vertical-ab" colspan="3"&gt;
                                  &lt;table class="table-information border-zero mb-0""&gt;
                                      &lt;tbody&gt;
                                          &lt;tr&gt;
                                              &lt;td class="td-information w-35"&gt;
                                                  &lt;p class="text text-bold"&gt;Facility Type&lt;/p&gt;
                                                  &lt;p class="text text-bold"&gt;Room/Unit Number&lt;/p&gt;
                                                  &lt;p class="text text-bold"&gt;Insurance Provider&lt;/p&gt;
                                                  &lt;p class="text text-bold"&gt;Insured’s Policy Number&lt;/p&gt;
                                                  &lt;p class="text text-bold"&gt;Invoice Number&lt;/p&gt;
                                              &lt;/td&gt;
                                              &lt;td class="td-information w-65"&gt;
                                                  &lt;p class="text-light"&gt;{{residencyInfo.facilityType}}&lt;/p&gt;
                                                  &lt;p class="text-light"&gt;{{residencyInfo.roomNumberChangeTo}}{{#if residencyInfo.roomNumberChange}} - {{residencyInfo.roomNumberChangeReason}}{{/if}}&lt;/p&gt;
                                                  &lt;p class="text-light"&gt;{{residencyInfo.insurerProvider}}&lt;/p&gt;
                                                  &lt;p class="text-light"&gt;{{residencyInfo.policyNumber}}&lt;/p&gt;
                                                  &lt;p class="text-light"&gt;{{residencyInfo.invoiceNumber}}&lt;/p&gt;
                                              &lt;/td&gt;
                                          &lt;/tr&gt;
                                      &lt;/tbody&gt;
                                  &lt;/table&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;td class="td-information td-border-top br-1 w-45"&gt;
                                  &lt;table class="w-full"&gt;
                                      &lt;tbody&gt;
                                          {{#if residencyInfo.haveDaysOutOfFacility}}
                                          &lt;tr&gt;
                                              &lt;td&gt;
                                                  &lt;p class="text text-bold"&gt;Total Days in Facility&lt;/p&gt;
                                              &lt;/td&gt;
                                              &lt;td&gt;
                                                  &lt;p class="text-light"&gt;{{residencyInfo.totalDaysInFacility}}&lt;/p&gt;
                                              &lt;/td&gt;
                                          &lt;/tr&gt;
                                          &lt;tr&gt;
                                              &lt;td&gt;
                                                  &lt;p class="text text-bold"&gt;Total Days out of Facility&lt;/p&gt;
                                              &lt;/td&gt;
                                              &lt;td&gt;
                                                  &lt;p class="text-light"&gt;{{residencyInfo.totalDaysOutOfFacility}}&lt;/p&gt;
                                              &lt;/td&gt;
                                          &lt;/tr&gt;
                                          {{/if}}
                                          {{#if residencyInfo.haveBedHoldDays}}
                                          &lt;tr&gt;
                                              &lt;td&gt;
                                                  &lt;p class="text text-bold"&gt;Bedhold Days&lt;/p&gt;
                                              &lt;/td&gt;
                                              &lt;td&gt;
                                                  &lt;p class="text-light"&gt;{{residencyInfo.bedHoldDays}}&lt;/p&gt;
                                              &lt;/td&gt;
                                          &lt;/tr&gt;
                                          {{/if}}
                                      &lt;/tbody&gt;
                                  &lt;/table&gt;
                              &lt;/td&gt;
                              &lt;td class="td-information bl td-border-top"&gt;
                                  &lt;table class="w-full"&gt;
                                      &lt;tbody&gt;
                                          &lt;tr&gt;
                                              &lt;td class="td-information-width"&gt;
                                                  &lt;p class="text-light-2"&gt;Reason for Absence&lt;/p&gt;
                                              &lt;/td&gt;
                                              &lt;td class="td-information-width"&gt;
                                                  &lt;p class="text-light-2 text-ar"&gt;Dates of Absence&lt;/p&gt;
                                              &lt;/td&gt;
                                          &lt;/tr&gt;
                                          {{#each residencyInfo.absenceReasons}}
                                          &lt;tr&gt;
                                              &lt;td&gt;
                                                  &lt;p class="text-light"&gt;{{reason}}&lt;/p&gt;
                                              &lt;/td&gt;
                                              &lt;td&gt;
                                                  &lt;p class="text-light text-ar"&gt;{{from}}th{{#if hasTo}} - {{to}}th{{/if}}&lt;/p&gt;
                                              &lt;/td&gt;
                                          &lt;/tr&gt;
                                          {{/each}}
                                      &lt;/tbody&gt;
                                  &lt;/table&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;/tbody&gt;
                      &lt;/table&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      &lt;table class="table-information"&gt;
                          &lt;tbody&gt;
                              &lt;tr class="tr-information"&gt;
                                  &lt;th class="td-background" colspan="3"&gt;
                                      &lt;p class="text-title"&gt;Care Provided&lt;/p&gt;
                                  &lt;/th&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                  &lt;td class="td-information p-0" style="width: 50%;"&gt;
                                      &lt;table class="table-information border-zero mb-0"&gt;
                                          &lt;tbody&gt;
                                              &lt;tr&gt;
                                                  &lt;th class="td-information w-58 th-activity td-border-bottom"&gt;
                                                      &lt;p class="text text-bold"&gt;Activities of Daily Living (ADLS)&lt;/p&gt;
                                                  &lt;/th&gt;
                                                  &lt;th class="td-information p-0 w-14 td-border-bottom vertical-ab"&gt;
                                                      &lt;div class="rotate-315"&gt;
                                                          &lt;p class="text-s10 text-ac text-gray-500"&gt;Standby&lt;/p&gt;
                                                      &lt;/div&gt;
                                                  &lt;/th&gt;
                                                  &lt;th class="td-information p-0 w-14 td-border-bottom vertical-ab"&gt;
                                                      &lt;div class="rotate-315"&gt;
                                                          &lt;p class="text-s10 text-ac text-gray-500"&gt;Hands On&lt;/p&gt;
                                                      &lt;/div&gt;
                                                  &lt;/th&gt;
                                                  &lt;th class="td-information p-0 w-14 td-border-bottom vertical-ab"&gt;
                                                      &lt;div class="rotate-315"&gt;
                                                          &lt;p class="text-s10 text-ac text-gray-500"&gt;Provided&lt;/p&gt;
                                                      &lt;/div&gt;
                                                  &lt;/th&gt;
                                              &lt;/tr&gt;
  
                                              {{#each careProvided.adls}}
                                              &lt;tr&gt;
                                                  &lt;td class="td-information th-activity br-1 vertical-ac td-border-bottom"&gt;
                                                      &lt;p class="text text-light"&gt;{{name}}&lt;/p&gt;
                                                  &lt;/td&gt;
                                                  &lt;td class="td-information p-4 br-1 text-ac vertical-ac td-border-bottom"&gt;
                                                      {{#if standBy}}
                                                      &lt;img src="{{../baseUrl}}\images\clear_check.png" style="width: 14px; height: 14px;"&gt;
                                                      {{/if}}
                                                  &lt;/td&gt;
                                                  &lt;td class="td-information p-4 br-1 text-ac vertical-ac td-border-bottom"&gt;
                                                      {{#if handsOn}}
                                                      &lt;img src="{{../baseUrl}}\images\clear_check.png" style="width: 14px; height: 14px;"&gt;
                                                      {{/if}}
                                                  &lt;/td&gt;
                                                  &lt;td class="td-information p-4 br-1 text-ac vertical-ac td-border-bottom"&gt;
                                                      {{#if provided}}
                                                      &lt;img src="{{../baseUrl}}\images\clear_check.png" style="width: 14px; height: 14px;"&gt;
                                                      {{/if}}
                                                  &lt;/td&gt;
                                              &lt;/tr&gt;
                                              {{/each}}
                                          &lt;/tbody&gt;
                                      &lt;/table&gt;
                                  &lt;/td&gt;
                                  &lt;td class="td-information p-0" rowspan="3" style="width: 50%; padding-top: 7px;"&gt;
                                      &lt;table class="table-information m-0 border-zero mb-0"&gt;
                                          &lt;tbody&gt;
                                              &lt;tr&gt;
                                                  &lt;th class="td-information td-border-bottom"&gt;
                                                      &lt;p class="text text-bold pl-10"&gt;Instrumental Activities of Daily Living (IADLS)&lt;/p&gt;
                                                  &lt;/th&gt;
                                              &lt;/tr&gt;
                                              {{#each careProvided.iadls}}
                                              &lt;tr&gt;
                                                  &lt;td class="td-information pt-0 pb-0"&gt;
                                                      &lt;p class="text text-light pl-10 "&gt;{{name}}&lt;/p&gt;
                                                  &lt;/td&gt;
                                              &lt;/tr&gt;
                                              {{/each}}
                                          &lt;/tbody&gt;
                                      &lt;/table&gt;
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/tbody&gt;
                      &lt;/table&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      &lt;table class="table-information"&gt;
                          &lt;tbody&gt;
                              &lt;tr class="tr-information"&gt;
                                  &lt;th class="td-background" colspan="4"&gt;
                                      &lt;p class="text-title"&gt;Invoice Totals&lt;/p&gt;
                                  &lt;/th&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                  &lt;td style="width: 58%;"&gt;
                                      &lt;table class="table-information border-zero m-0"&gt;
                                          &lt;tbody&gt;
                                              {{#each invoiceTotals.charges}}
                                              &lt;tr&gt;
                                                  &lt;td class="td-information pt-0-10" style="width:60%"&gt;
                                                      &lt;p class="text text-bold" style="font-size:15px"&gt;{{name}}&lt;/p&gt;
                                                  &lt;/td&gt;
                                                  &lt;td class="td-information pt-0-10" style="width:15%"&gt;
                                                      &lt;p class="text text-light text-ar"&gt;{{amount}}&lt;/p&gt;
                                                  &lt;/td&gt;
                                                  &lt;td class="td-information p-4" style="width:25%"&gt;
                                                      {{#if includedRnB}}
                                                      &lt;p class="text-small"&gt;Included in R&amp;B&lt;/p&gt;
                                                      {{/if}}
                                                  &lt;/td&gt;
                                              &lt;/tr&gt;
                                              {{/each}}
                                              &lt;tr&gt;
                                                  &lt;td class="td-information text-ar" style="padding-right: 10px" colspan="2"&gt;
                                                      &lt;p class="text-title-35 text-green-500 text-ar"&gt;${{invoiceTotals.totalAmount}}&lt;/p&gt;
                                                  &lt;/td&gt;
                                              &lt;/tr&gt;
                                          &lt;/tbody&gt;
                                      &lt;/table&gt;
                                  &lt;/td&gt;
                                  &lt;td class="td-information pt-0" rowspan="2" style="width: 48%;"&gt;
                                      &lt;table class="table-information p-0 m-0 border-zero"&gt;
                                          &lt;tbody&gt;
                                              &lt;tr&gt;
                                                  &lt;th class="td-information pl-0 pt-0-10"&gt;&lt;p class="text text-bold"&gt;Other Payment sources:&lt;/p&gt;&lt;/th&gt;
                                              &lt;/tr&gt;
                                              {{#each invoiceTotals.otherPaymentSources}}
                                              &lt;tr&gt;
                                                  &lt;td class="td-information pl-0 pt-0-10"&gt;&lt;p class="text text-light"&gt;{{name}}&lt;/p&gt;&lt;/td&gt;
                                              &lt;/tr&gt;
                                              {{/each}}
                                          &lt;/tbody&gt;
                                      &lt;/table&gt;
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/tbody&gt;
                      &lt;/table&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      &lt;table class="table-information"&gt;
                          &lt;tbody&gt;
                              &lt;tr class="tr-information"&gt;
                                  &lt;th class="td-background" style="width: 25%"&gt;
                                      &lt;p class="text-title text-al" style="font-size: 16px; padding-left: 10px"&gt;Reviewed By&lt;/p&gt;
                                  &lt;/th&gt;
                                  &lt;th class="td-background" style="width: 35%"&gt;
                                      &lt;p class="text-title text-al" style="font-size: 16px; padding-left: 10px"&gt;Signed By&lt;/p&gt;
                                  &lt;/th&gt;
                                  &lt;th class="td-background" style="width: 25%"&gt;
                                      &lt;p class="text-title text-al" style="font-size: 16px; padding-left: 10px"&gt;Signed On&lt;/p&gt;
                                  &lt;/th&gt;
                                  &lt;th class="td-background" style="width: 15%"&gt;
                                      &lt;p class="text-title text-al" style="font-size: 16px; padding-left: 10px"&gt;Ip Address&lt;/p&gt;
                                  &lt;/th&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                  &lt;td class="td-information pt-0-10" style="padding-top: 16px;"&gt;&lt;p class="text pl-4" style="font-size: 15px"&gt;{{signature.facility.title}}&lt;/p&gt;&lt;/td&gt;
                                  &lt;td class="td-information pt-0-10" style="padding-top: 16px;"&gt;&lt;p class="text" style="font-family: BrushScript; font-size: 24px"&gt;{{signature.facility.signedBy}}&lt;/p&gt;&lt;/td&gt;
                                  &lt;td class="td-information pt-0-10" style="padding-top: 16px;"&gt;&lt;p class="text" style="font-size: 15px"&gt;{{signature.facility.signedOn}}&lt;/p&gt;&lt;/td&gt;
                                  &lt;td class="td-information pt-0-10" style="padding-top: 16px;"&gt;&lt;p class="text text-light" style="font-size: 15px"&gt;{{signature.facility.ipAddress}}&lt;/p&gt;&lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                  &lt;td class="td-information pt-0-10"&gt;&lt;p class="text pl-4" style="font-size: 15px"&gt;{{signature.client.title}}&lt;/p&gt;&lt;/td&gt;
                                  &lt;td class="td-information pt-0-10"&gt;&lt;p class="text" style="font-size: 15px"&gt;{{signature.client.signedBy}}&lt;/p&gt;&lt;/td&gt;
                                  &lt;td class="td-information pt-0-10"&gt;&lt;p class="text" style="font-size: 15px"&gt;{{signature.client.signedOn}}&lt;/p&gt;&lt;/td&gt;
                                  &lt;td class="td-information pt-0-10"&gt;&lt;p class="text text-light" style="font-size: 15px"&gt;{{signature.client.ipAddress}}&lt;/p&gt;&lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                  &lt;td class="td-information pt-0-10"&gt;&lt;p class="text pl-4" style="font-size: 15px"&gt;{{signature.local.title}}&lt;/p&gt;&lt;/td&gt;
                                  &lt;td class="td-information pt-0-10"&gt;&lt;p class="text" style="font-size: 15px"&gt;{{signature.local.signedBy}}&lt;/p&gt;&lt;/td&gt;
                                  &lt;td class="td-information pt-0-10"&gt;&lt;p class="text" style="font-size: 15px"&gt;{{signature.local.signedOn}}&lt;/p&gt;&lt;/td&gt;
                                  &lt;td class="td-information pt-0-10"&gt;&lt;p class="text text-light" style="font-size: 15px"&gt;{{signature.local.ipAddress}}&lt;/p&gt;&lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/tbody&gt;
                      &lt;/table&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>You can see markers such as {{insured}}, etc. and commands such as {{#each residencyInfo.absenceReasons}} for looping through data, all are required by handlebars for data replacing. Here part of the code:</p>
  <pre><code>string templateHtml = File.ReadAllText(System.IO.Path.Combine(basePath, &quot;templates/MyTemplate.html&quot;));
  var template = Handlebars.Compile(templateHtml);
  var data = new
  {
      baseUrl = basePath,
      insured = invoice.CustomerStatus, // Customer Name
      facilityName = invoice.FacilityName,
      invoicePeriod = invoice.PeriodFrom.ToString(&quot;MMM yyyy&quot;),
      invoiceDateLTCI = DateTime.Now.ToString(&quot;MM/dd/yyyy&quot;),
      clientReferrer = invoice.ClientReferrerName,
  
      residencyInfo = new
      {
          facilityType = currenttFacilityType,
          insurerProvider = invoice.Insurer,
          policyNumber = invoice.ClaimNumber,
          ... // removed intencionally
          absenceReasons = JsonConvert.DeserializeAnonymousType(JsonConvert.SerializeObject(facilityAbsenceReasons), jsonFacilityAbsenceReasonsDefinition)
      },
      careProvided = new
      {
          adls = ..., // removed intencionally
          iadls = ... // removed intencionally
      },
      invoiceTotals = new
      {
          charges = JsonConvert.DeserializeAnonymousType(JsonConvert.SerializeObject(facilityCharges), jsonFacilityChargesDefinition),
          totalAmount = totalAmount,
          otherPaymentSources = JsonConvert.DeserializeAnonymousType(JsonConvert.SerializeObject(facilityOtherPayments), jsonFacilityOtherPaymentsDefinition)
      },
      signature = new
      {
          facility = new
          {
              signedBy = invoice.SignatureName,
              signedOn = DateTime.ParseExact(invoice.SignatureDate, &quot;M/d/yyyy h:mm:ss tt&quot;, CultureInfo.InvariantCulture).ToString(&quot;MM/dd/yyyy h:mm tt&quot;),
              title = invoice.SignatureFacilityTitleName,
              ipAddress = invoice.IpAddress
          },
          client = new
          {
              ... // removed intencionally
          },
          ...
      }
  };
  
  string invoiceHtml = template(data);
  </code></pre>
  <p>invoiceHtml has the final HTML with data, which is used to generate the PDF by using iText7. Here part of the code:</p>
  <pre><code>ConverterProperties converterProperties = new ConverterProperties();
  
  // Create a Temp PDF file temporary, remove this when the whole invoice is created to manaqge it as stream byte[]
  string file = System.IO.Path.Combine(basePath, $@&quot;Documents\Temp_Invoice_{invoice.FacilityInvoiceId}.pdf&quot;);
  
  PdfWriter writer = new PdfWriter(file);
  PdfDocument pdf = new PdfDocument(writer);
  pdf.SetDefaultPageSize(PageSize.LEGAL);
  var document = HtmlConverter.ConvertToDocument(invoiceHtml, pdf, converterProperties);
  document.Close();
  </code></pre>
  <p>Here is is the PDF document in which you can see the section of signers prints across a page break. In this case if data printed in the above section (charges) is too much to produce signers section prints in this way, I need to move signers block to a new page. Even, if the charges section (Invoice Totals) is too much, also to fit in first page, I need to move it to the next page. Here is the screenshot:</p>
  <p><a href="https://i.stack.imgur.com/TXAaK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TXAaK.png" alt="enter image description here" /></a></p>
  <p>I tried by recovering IElements by using ConverToElements, but it gives me the whole element objects with no page these belong to.</p>
  <p>Thanks for any help.</p>