search

cesarvr / pdf-generator

Cordova plugin to generate pdf in the client-side
MIT License
106 stars 62 forks source link

Generator doesn't recognize css style="page-break-after: always;" #95

Open jim0020 opened 5 years ago

jim0020 commented 5 years ago

I have certain elements in my html styled with page-break-after: always; However this is not recognized in the resulting PDF. For example, here are two table elements separated by a p element with style="page-break-after: always;". There is no page break in the resulting PDF between the two tables:

<!DOCTYPE html>
<html>
  <head>
    <title></title>
  </head>
  <body>
    <h3 style="text-align: center;">
      Food Buying Guide Search Results
    </h3>
    <p>
      <br>
    </p>
    <table style="width:100%; border-collapse:collapse;">
      <thead style="background-color: lightgray;">
        <tr>
          <th style="border: 1px solid black; width:8%; text-align: center;">
            Column A
          </th>
          <th style="border: 1px solid black; width:15%; text-align: center;">
            Column B
          </th>
          <th style="border: 1px solid black; width:0%; text-align: center;">
            Column C
          </th>
          <th style="border: 1px solid black; width:10%; text-align: center;">
            Column D
          </th>
          <th style="border: 1px solid black; width:7%; text-align: center;">
            Column E
          </th>
          <th style="border: 1px solid black; width:25%; text-align: center;">
            Column F
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td style="border: 1px solid black; width:8%; text-align: center;">
            The
          </td>
          <td style="border: 1px solid black; width:15%; text-align: center;">
            Quick
          </td>
          <td style="border: 1px solid black; width:0%; text-align: center;">
            Brown
          </td>
          <td style="border: 1px solid black; width:10%; text-align: center;">
            Fox
          </td>
          <td style="border: 1px solid black; width:7%; text-align: center;">
            Jumped
          </td>
          <td style="border: 1px solid black; width:25%; text-align: center;">
            Over The Log
          </td>
        </tr>
      </tbody>
    </table>
    <p style="page-break-after: always;" />
    <table style="width:100%; border-collapse:collapse;">
      <thead style="background-color: lightgray;">
          <th style="border: 1px solid black; width:8%; text-align: center;">
            Column A
          </th>
          <th style="border: 1px solid black; width:15%; text-align: center;">
            Column B
          </th>
          <th style="border: 1px solid black; width:0%; text-align: center;">
            Column C
          </th>
          <th style="border: 1px solid black; width:10%; text-align: center;">
            Column D
          </th>
          <th style="border: 1px solid black; width:7%; text-align: center;">
            Column E
          </th>
          <th style="border: 1px solid black; width:25%; text-align: center;">
            Column F
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td style="border: 1px solid black; width:8%; text-align: center;">
            The
          </td>
          <td style="border: 1px solid black; width:15%; text-align: center;">
            Quick
          </td>
          <td style="border: 1px solid black; width:0%; text-align: center;">
            Brown
          </td>
          <td style="border: 1px solid black; width:10%; text-align: center;">
            Fox
          </td>
          <td style="border: 1px solid black; width:7%; text-align: center;">
            Jumped
          </td>
          <td style="border: 1px solid black; width:25%; text-align: center;">
            Over The Log
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
jim0020 commented 5 years ago

If I rework the html to remove the page-break-after styling on the p element between the tables and instead put "page-break-before: always;" on the second table, it seems to work as expected.