How I can avoid this error on DOMPDF with laravel 8 when working with large tables?

Question

I am working with DOMPDF in Laravel 8, when I create a table with many records and jumps to the next page, it does not perform the page break as it should, Could someone help me to know what I am doing wrong?. I was reading many articles on the internet and none of them worked for me.

Here is my code:

<div class="box-products-table">
  <table class="table table-striped table-bordered">
    <tbody>
      <tr>
        <td class="text-center roboto">{{ trans('image') }}</td>
        <td class="text-center roboto">{{ trans('just_name') }}</td>
        <td class="text-center roboto">{{ trans('quantity') }}</td>
        <td class="text-center roboto">{{ trans('unit_price') }}</td>
        <td class="text-center roboto">{{ trans('taxes') }}</td>
        <td class="text-center roboto">{{ trans('subtotal') }}</td>
        <td class="text-center roboto">{{ trans('total_price') }}</td>
      </tr>
      @for($i = 0; $i < 100; $i++)
        <tr>
          <td class="text-center"><img src="{{ public_path('storage/uploads/products/d6d74f351d482bb41787e86350ace02e.jpg') }}" height="70px"></td>
          <td class="text-center">PORTATIL DELL 4HWRT</td>
          <td class="text-right">526</td>
          <td class="text-right">$ 4.985.650</td>
          <td class="text-right">$ 947.273,5</td>
          <td class="text-right">$ 99.713.000</td>
          <td class="text-right">$ 2.622.451.900</td>
        </tr>
      @endfor
    </tbody>
  </table>
</div>

Result: Go to screenshot (https://ibb.co/Rj5ZPTW)

**it does not perform the page break as it should** - a table tag is **NOT** supposed to "perform a page break as it should" - Imagine if the contents of text in a span for 3 pages --- what do you think the system should perform a page "break" ????? — Ken Lee, Dec 26 '21 at 03:37
You are right. However, is there any way in which you can condition this situation to make that page break correctly? — Julián Cabrera, Dec 26 '21 at 03:55
Short answer: Assuming that the text will **not** span for 3 pages. Then the maximum height for each td will be 70px (determinted by the graphic height). Hence please calculate the remaining height of the page and if it is say less than 100px, then (1) close the table (by ) and (2) insert a pagebreak by
(you will need css like `.page_break { page-break-before: always; }` and (3) re-insert another table (by ) . For the (2), please refer to [this_SO_post](https://stackoverflow.com/questions/22746958/dompdf-adding-a-new-page-to-pdf) — Ken Lee, Dec 26 '21 at 04:00
Alternatively, do a page_break on display of n items (adjust the n after several tests please) — Ken Lee, Dec 26 '21 at 04:06

score 0 · Accepted Answer · answered Dec 26 '21 at 21:16

.page_break {
  page-break-before: always;
}

<!-- adjust $n as needed. $n = number of rows that fit in a page -->
@foreach(collect(range(1,100))->chunk($n) as $chunk)
  <div class="box-products-table">
    <table class="table table-striped table-bordered">
      <tbody>
        <tr>
          <td class="text-center roboto">{{ trans('image') }}</td>
          <td class="text-center roboto">{{ trans('just_name') }}</td>
          <td class="text-center roboto">{{ trans('quantity') }}</td>
          <td class="text-center roboto">{{ trans('unit_price') }}</td>
          <td class="text-center roboto">{{ trans('taxes') }}</td>
          <td class="text-center roboto">{{ trans('subtotal') }}</td>
          <td class="text-center roboto">{{ trans('total_price') }}</td>
        </tr>
        @foreach($chunk as $i)
          <tr>
            <td class="text-center"><img src="{{ public_path('storage/uploads/products/d6d74f351d482bb41787e86350ace02e.jpg') }}" height="70px"></td>
            <td class="text-center">PORTATIL DELL 4HWRT</td>
            <td class="text-right">526</td>
            <td class="text-right">$ 4.985.650</td>
            <td class="text-right">$ 947.273,5</td>
            <td class="text-right">$ 99.713.000</td>
            <td class="text-right">$ 2.622.451.900</td>
          </tr>
        @endforeach
      </tbody>
    </table>
  </div>
  <div class="page-break"></div> <!-- break page -->
@endforeach

How I can avoid this error on DOMPDF with laravel 8 when working with large tables?

1 Answers1