DOMPDF 在 Laravel 文档开头创建空白页面

Question

DOMPDF 在 Laravel 文档的开头创建空白页面。我已经检查了所有 html 内容，没有空格。有人有建议吗？

下面是我尝试使用 DOMPDF 将其放入 pdf 文件的代码

<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（以及默认的 Web 浏览器）通过内容区域而不是包含框确定高度。边距和填充将进一步扩展元素的高度，除非所有内容都专门设置为 0。至少在 dompdf 支持

box-sizing

声明之前。

Answer 2

从页面包装中删除

display: table;

解决了我的问题。