DOMPDF создает пустую страницу в начале документа в laravel

Question

DOMPDF создает пустую страницу в начале документа в laravel. Я запустил весь html cotent, нет пробелов. у кого-нибудь есть предложение?

Ниже код, который я пытаюсь вписаться в файл в формате PDF с использованием DOMPDF

<div class="invoice printableArea" style="color: #333333; font: 12px Verdana; padding: 0; margin: 0;"> 
<table cellpadding="0" cellspacing="0" border="0" width="100%" class="main-table" 
     style="height: 100%;margin-top: 0;"> 
    <tr> 
     <td align="center" style="width: 100%; height: 100%;"> 
      <table cellpadding="0" cellspacing="0" border="0" 
        style=" width: 100%; table-layout: fixed; margin: 0px;"> 
       <tr> 
        <td style=" border: 1px solid #e6e6e6; margin: 0px auto 0px auto; padding: 20px; text-align: left;"> 
         <table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin:0;"> 
          <tr> 
           <td style="padding:0px 0px 0px 0px;"> 
            <img src="" width="150" height="45" alt=""/></td> 
          </tr> 
         </table> 
         <table cellpadding="0" cellspacing="5" border="0" width="100%" style="border: 1px solid #e6e6e6; padding:0;margin-top:10px;"> 
          <tr valign="top"> 
           <td style="padding: 15px;"> 
            <h2 style="margin: 0px 0px 10px 0px;">Invoice&nbsp;#</h2> 
            <table style="float:left;border:none;margin:0;" > 
             <tbody> 
             <tr> 
              <td style="padding: 5px;text-align: right;">Invoice Date : </td> 
              <td style="padding: 5px;text-align: right;"> </td> 
             </tr> 
             <tr> 
              <td style="padding: 5px;text-align: right;"><span>Payment Method : </span></td> 
              <td style="padding: 5px;text-align: right;"></td> 
             </tr> 
             <tr> 
              <td style="padding: 5px;text-align: right;"><span>Shipping Method : </span></td> 
              <td style="padding: 5px;text-align: right;"></td> 
             </tr> 
             </tbody> 
            </table> 
           </td> 
           <td style="padding: 30px 0px 0px 0px;text-align: center;"> 
            <div id="invoiceBarcodeTarget"></div> 
           </td> 
          </tr> 
         </table> 
         <table cellpadding="0" cellspacing="5" border="0" width="100%" 
           style="padding:20px 0px;"> 
          <tr valign="top"> 
           <td width="34%" 
            style="padding:10px;"> 
            <h3 style=" padding: 0px 0px 3px 1px; margin: 0px;">Billing Address : </h3> 
            <p style="margin: 2px 0px 3px 0px;"> 
             <strong></strong> </p> 
            <p style="margin: 2px 0px 3px 0px;"> 
             <br/></p> 
            <p style="margin: 2px 0px 3px 0px;"> 
             </p> 
            <p style="margin: 2px 0px 3px 0px;"> 

            </p> 
            <p style="margin: 2px 0px 3px 0px;"> 
             <i title="Phone" class="fa fa-phone-square"></i>        
              <br/> 
              <i title="Phone" class="fa fa-phone-square"></i> 
             @endif 
            </p> 
           </td> 
           <td width="33%" style="padding:10px;"> 
             <h3 style=" padding: 0px 0px 3px 1px; margin: 0px;">Shipping Address : </h3> 
             <p style="margin: 2px 0px 3px 0px;"> 
              <strong></strong> </p> 
             <p style="margin: 2px 0px 3px 0px;"> 
              <br/></p> 
             <p style="margin: 2px 0px 3px 0px;"> 
              </p> 
             <p style="margin: 2px 0px 3px 0px;">  
             </p> 
             <p style="margin: 2px 0px 3px 0px;"> 
              <i title="Phone" class="fa fa-phone-square"></i> 
             </p> 
            @endif 
           </td> 
          </tr> 
         </table>  
          <table class="" style="background-color: #dddddd;border: 1px solid #e6e6e6;margin:0;"> 
           <tr> 
            <th style="background-color: #f9f9f9; padding: 6px 10px; white-space: nowrap;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6; "><strong class="text-center">Sr. No.</strong></th> 
            <th style="background-color: #f9f9f9; padding: 6px 10px; white-space: nowrap;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6; "> 
             Product 
            </th> 
            <th style="background-color: #f9f9f9; padding: 6px 10px; white-space: nowrap;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6; "> 
             Unit price 
            </th> 
            <th style="background-color: #f9f9f9; padding: 6px 10px; white-space: nowrap;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6; "> 
             Discount 
            </th> 
            <th style="background-color: #f9f9f9; padding: 6px 10px; white-space: nowrap;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6; "> 
             Quantity 
            </th> 
            <th style="background-color: #f9f9f9; padding: 6px 10px; white-space: nowrap;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6; "> 
             Subtotal 
            </th> 
           </tr> 
           <tbody> 
             <tr> 
              <td style="padding: 5px 10px; background-color: #ffffff;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6;text-align: center; ">{{$i}}</td> 
              <td style="padding: 5px 10px; background-color: #ffffff;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6;text-align: left; "> 
               <b>{{@$product_detail['title']}} </b> <br />    
               <b>Seller : </b> {{@$product_detail['store_name']}} 
              </td> 
              <td style="padding: 5px 10px; background-color: #ffffff; text-align: center;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6; "> 
               <span><span class="WebRupee">&#x20B9;</span>{{ number_format(@$product['price'], 2) }}</span> 
              </td> 
              <td style="padding: 5px 10px; background-color: #ffffff; text-align: center;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6; "> 
               <span><span class="WebRupee">&#x20B9;</span>0.00</span> 
              </td> 
              <td style="padding: 5px 10px; background-color: #ffffff; text-align: right;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6; "> 
               {{@$product['quantity']}} 
              </td> 
              <td style="padding: 5px 10px; background-color: #ffffff; text-align: right;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6; "> 
               <span><span class="WebRupee">&#x20B9;</span>{{ number_format(@$product['price']*$product['quantity'], 2) }}</span> 
              </td> 
             </tr> </tbody> 
          </table> 
          <table class="" style="background-color: #dddddd;border: 1px solid #e6e6e6;margin:0;"> 
           <tr> 
            <th style="background-color: #f9f9f9; padding: 6px 10px; white-space: nowrap;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6; "><strong class="text-center">Sr. No.</strong></th> 
            <th style="background-color: #f9f9f9; padding: 6px 10px; white-space: nowrap;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6; "> 
             Product 
            </th> 
            <th style="background-color: #f9f9f9; padding: 6px 10px; white-space: nowrap;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6; "> 
             Unit price 
            </th> 
            <th style="background-color: #f9f9f9; padding: 6px 10px; white-space: nowrap;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6; "> 
             Discount 
            </th> 
            <th style="background-color: #f9f9f9; padding: 6px 10px; white-space: nowrap;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6; "> 
             Quantity 
            </th> 
            <th style="background-color: #f9f9f9; padding: 6px 10px; white-space: nowrap;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6; "> 
             Delivery Address 
            </th> 
            <th style="background-color: #f9f9f9; padding: 6px 10px; white-space: nowrap;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6; "> 
             Subtotal 
            </th> 
           </tr> 
           <tbody><tr> 
              <td style="padding: 5px 10px; background-color: #ffffff;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6;text-align: center; ">{{$i}}</td> 
              <td style="padding: 5px 10px; background-color: #ffffff;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6;text-align: left; "> 
               <b>{{@$product_detail['title']}} </b> <br /> 
               <b>Seller : </b> {{@$product_detail['store_name']}} 
              </td> 
              <td style="padding: 5px 10px; background-color: #ffffff; text-align: center;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6; "> 

               <span><span class="WebRupee">&#x20B9;</span></span> 
              </td> 
              <td style="padding: 5px 10px; background-color: #ffffff; text-align: center;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6; "> 

               <span><span class="WebRupee">&#x20B9;</span>0.00</span> 
              </td> 
              <td style="padding: 5px 10px; background-color: #ffffff; text-align: right;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6; "> 
               1 
              </td> 
              <td style="padding: 5px 10px; background-color: #ffffff; text-align: right;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6; "> 
                 <span style="text-align:left;float:left;"> 
                 </span> 
              </td> 
              <td style="padding: 5px 10px; background-color: #ffffff; text-align: right;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6; "> 
               <span><span class="WebRupee">&#x20B9;</span>{{ number_format(@$product['price'], 2) }}</span> 
              </td> 
             </tr> 
             <?php $i++; ?> 
            @endforeach 
           @else 
            <tr> 
             <td colspan="100%"> 
              {{trans('messages.error.order.order_product.empty')}} 
             </td> 
            </tr> 
           @endif 
           </tbody> 
          </table> 
         @endif 
         <table style="width:35%;float:right;border:none;" > 
          <tbody> 
          <tr> 
           <td style="padding: 5px;text-align: right;">Subtotal : </td> 
           <td style="font-weight: bold;padding: 5px;text-align: right;"><span><span class="WebRupee">&#x20B9;</span>{{ number_format(@$invoiceData['invoice']['subtotal'], 2) }}</span></td> 
          </tr> 
          <tr> 
           <td style="padding: 5px;text-align: right;"><span>Order Discount (-) : </span></td> 
           <td style="font-weight: bold;padding: 5px;text-align: right;"><span><span class="WebRupee">&#x20B9;</span>00.00</span></td> 
          </tr> 
          <tr> 
           <td style="padding: 5px;text-align: right;"><span>Price After Discount : </span></td> 
           <td style="font-weight: bold;padding: 5px;text-align: right;"><span><span class="WebRupee">&#x20B9;</span>{{ number_format(@$invoiceData['invoice']['total'], 2) }}</span></td> 
          </tr> 
          <tr> 
           <td style="padding: 5px;text-align: right;"><span>Shipping Cost : </span></td> 
           <td style="font-weight: bold;padding: 5px;text-align: right;"><span><span class="WebRupee">&#x20B9;</span>{{ number_format(@$invoiceData['invoice']['shipping_cost'], 2) }}</span></td> 
          </tr> 
          <tr> 
           <td style="padding: 5px;text-align: right;"><span>Grand Total : </span></td> 
           <td style="font-weight: bold;padding: 5px;text-align: right;"><span><span class="WebRupee">&#x20B9;</span>{{ number_format(@$invoiceData['invoice']['total'], 2) }}</span></td> 
          </tr> 
          </tbody> 
         </table> 
        </td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
</table> 

Answer 1

Три вещи:

1) Вложенные таблицы. Как правило, отлично, но ваш внешний стол - это просто контейнер для внутренней таблицы. dompdf в настоящее время не может разбить отдельную ячейку таблицы на разных страницах (#98), поэтому это вызовет у вас все виды горя. Если у вас есть стиль на той таблице, которую вы хотите применить (например, на границе), используйте div.

2) height: 100%; стайлинг. Избегайте этого, если можете, на элементах, которые являются прямым потомком тела. Расчет высоты dompdf иногда может быть отключен, что вызывает пейджинг на элементе со 100% высоты тела.

3) Моделирование height: 100%;, часть 2. Высота, вероятно, не будет такой, какой вы ожидаете, поскольку dompdf (и по умолчанию веб-браузеры) определяют высоту по области содержимого, а не по содержанию. Маржа и отступы будут дополнительно расширять высоту элемента, если все не настроено на 0. По крайней мере, до тех пор, пока dompdf не поддерживает объявление box-sizing.