Изменение значения внутри <thead>после разрыва страницы - PullRequest
Новая
       4

Изменение значения внутри <thead>после разрыва страницы

0 голосов
/ 18 февраля 2020

Я хочу создать PDF-файл с таблицей, которая может занимать несколько страниц. Вверху каждой новой страницы я хочу показать промежуточный итог в заголовке таблицы, который суммирует суммы предыдущих строк таблицы на предыдущих страницах. Можно ли изменить значение промежуточного итога внутри <th> в <thead> после разрыва страницы? 

<table>
  <thead>
    <tr>
      <th>Position</th>
      <th>Description</th>
      <th>Quantity</th>
      <th>Price</th>
      <th>Amount</th>
    </tr>
    <tr>
      <th colspan="4">Subtotal</th>
      <th>0,00 €</th> <!-- Should be changed after every page break -->
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>
        Lorem ipsum<br>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumyeirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua... 
      </td>
      <td>21,00</td>
      <td>10,00 €</td>
      <td>210,00 €</td>
    </tr>
    <tr>
      <td>2</td>
      <td>
        Stet clita kasd gubergren<br>
        At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no seatakimata sanctus est Lorem ipsum dolor sit amet...
      </td>
      <td>1,00</td>
      <td>45,96 €</td>
      <td>45,96 €</td>
    </tr>
    <tr>
      <td>3</td>
      <td>
        Lorem ipsum<br>
        Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet, sed diam nonumy eirmod temporinvidunt ut labore et dolore magna aliquyam erat, sed diam voluptua...
      </td>
      <td>2,50</td>
      <td>32,00 €</td>
      <td>80,00 €</td>
    </tr>
    <!-- ... and more <tr> -->
  </tbody>
</table>

Я использую Puppeteer с Chromium для создания PDF. Chromium автоматически добавляет <thead> вверху каждой новой страницы при создании PDF. Это работает нормально, но всегда одинаково <thead>, и я не вижу возможности изменить его на каждой странице.

Я попытался установить промежуточный итог с javascript, пройдя через <thead>, которые были сгенерированы Chromium, но Chromium генерирует дополнительный <thead> после запуска javascript. Таким образом, нет никакого способа увидеть фактическое HTML, которое используется Chromium для печати PDF.

Я попытался установить промежуточный итог с помощью CSS, но кажется невозможным суммировать суммы всех предыдущие строки таблицы. Даже установив атрибут data-amount для каждого <tr>.

Единственное возможное решение, которое я вижу сейчас, - это разбить таблицу на несколько таблиц, которые поместятся на странице так, чтобы разрыв страницы находился не внутри таблицы, а между таблицами. Тогда для каждой таблицы у меня может быть свой <thead>. Это кажется очень сложным, потому что я должен построить таблицы так, чтобы они точно вписывались в страницы, потому что каждая строка таблицы может иметь разную высоту. Этот подход кажется слишком сложным только для расчета промежуточных итогов на каждой странице.

...