Dompdf

Question

我有一个关于 dompdf 的问题，因为我想做的是在一行中打印所有内容，所以在一行中打印 4 html 个不同的部分：像这样工作正常的屏幕截图 1：

但是如果我第一个 table 和 table 一样长那么它会破坏所有内容并且我无法获得与第一个屏幕截图相同的输出。

我的代码非常简单，我知道它一定是一些快速的 html/css 修复，但我不知道或者我可以将打印指针设置回顶部以便它管理屏幕截图 - 1 即使在打印第一个 long table?

    <style>
#content_pdf {  margin-top:15px;    width: 100%; }
#header {   top: -40px;   border-bottom: 0.1pt solid #aaa !important;   height:35px; position: fixed; /*    top: -115px;*/
    width: 100% !important;  

}

#footer {   bottom: 10;   border-top: 0.1pt solid #aaa; }
#header table,
#footer table {     width: 100%;    border-collapse: collapse;  border: none; }

#header td,
#footer td {   padding: 0;  width: 50%;      }

.page-number {   text-align: center; }

.page-number:before {   content: 'Page ' counter(page); } /* hr {   page-break-after: always;   border: 0; }*/ table{   font: arial !important;     font-size:9px !important; }


.quarterPage {  width: 25% !important;  display: inline-block !important;   margin: 0px !important;     padding: 0px !important;    float: left !important;     height: auto !important; } </style> </head>

<body class=' page-footer-fixed-mobile page-sidebar-closed page-header-fixed page-quick-sidebar-over-content page-sidebar-fixed page-footer-fixed'>


<div id='header'>   <table>
    <tr>
      <td><strong><em> Report</em></strong></td>
      <td style='text-align: right;'><img src='00' style='height: 30px; width:auto; padding:2px;' /></td>
    </tr>   </table> </div> <div id='content_pdf'>


                    <div id="DataTables_Table_0_wrapper" class="dataTables_wrapper no-footer"><div class="row"><div class="col-md-6 col-sm-12"></div><div class="col-md-6 col-sm-12"></div></div><div class="table-scrollable"><table class="table table-striped table-hover telco_datatable dataTable no-footer" id="DataTables_Table_0" role="grid" aria-describedby="DataTables_Table_0_info">
                    <thead>
                    <tr role="row"><th class="sorting_asc hidePrint" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-sort="ascending" aria-label=": activate to sort column ascending"></th><th class="sorting hidePrint" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Source: activate to sort column ascending">Source</th><th class="sorting hidePrint" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Service Number: activate to sort column ascending">Service Number</th><th class="sorting hidePrint" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Date: activate to sort column ascending">Date</th><th class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Time: activate to sort column ascending">Time</th><th class="sorting hidePrint" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Place Called: activate to sort column ascending">Place Called</th><th class="sorting hidePrint" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Number Called: activate to sort column ascending">Number Called</th><th class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Usage Type: activate to sort column ascending">Usage Type</th></tr>
                    </thead>
                    <tbody>
                    <tr role="row" class="odd">
                            <td>23:57:00</td>
                            <td>Calls and Services</td>
                        </tr><tr role="row" class="even">
                            <td>20:19:00</td>
                            <td>Calls and Services</td>
                        </tr><tr role="row" class="odd">
                            <td>19:52:00</td>
                            <td>Calls and Services</td>
                        </tr><tr role="row" class="even">
                            <td>19:50:00</td>
                            <td>Calls and Services</td>
                        </tr><tr role="row" class="odd">
                            <td>19:36:00</td>
                            <td>Calls and Services</td>
                        </tr><tr role="row" class="even">
                            <td>19:34:00</td>
                            <td>Calls and Services</td>
                        </tr><tr role="row" class="odd">
                            <td>19:29:00</td>
                            <td>Calls and Services</td>
                        </tr><tr role="row" class="even">
                            <td>19:14:00</td>
                            <td>Calls and Services</td>
                        </tr><tr role="row" class="odd">
                            <td>18:47:00</td>
                            <td>Calls and Services</td>
                        </tr><tr role="row" class="even">
                            <td>18:30:00</td>
                            <td>Calls and Services</td>
                        </tr><tr role="row" class="odd">
                            <td>18:21:00</td>
                            <td>Calls and Services</td>
                        </tr><tr role="row" class="even">
                            <td>23:52:00</td>
                            <td>Calls and Services</td>
                        </tr><tr role="row" class="odd">
                            <td>18:20:00</td>
                            <td>Calls and Services</td>
                        </tr><tr role="row" class="even">
                            <td>18:10:00</td>
                            <td>Calls and Services</td>
                        </tr><tr role="row" class="odd">
                            <td>18:05:00</td>
                            <td>Calls and Services</td>
                        </tr><tr role="row" class="even">
                            <td>17:57:00</td>
                            <td>Calls and Services</td>
                        </tr><tr role="row" class="odd">
                            <td>17:37:00</td>
                            <td>Calls and Services</td>
                        </tr><tr role="row" class="even">
                            <td>17:28:00</td>
                            <td>Calls and Services</td>
                        </tr><tr role="row" class="odd">
                            <td>17:13:00</td>
                            <td>Calls and Services</td>
                        </tr><tr role="row" class="even">
                            <td>17:06:00</td>
                            <td>Calls and Services</td>
                        </tr><tr role="row" class="odd">
                            <td>17:05:00</td>
                            <td>Calls and Services</td>
                        </tr><tr role="row" class="even">
                            <td>17:02:00</td>
                            <td>Calls and Services</td>
                        </tr><tr role="row" class="odd">
                            <td>23:39:00</td>
                            <td>Calls and Services</td>
                        </tr><tr role="row" class="even">
                            <td>16:57:00</td>
                            <td>Calls and Services</td>
                        </tr><tr role="row" class="odd">
                            <td>16:55:00</td>
                            <td>Calls and Services</td>
                        </tr></tbody>
                    </table></div><div class="row"><div class="col-md-5 col-sm-12"></div><div class="col-md-7 col-sm-12"></div></div></div>
                </div><div class='quarterPage' style='border: 0px solid red; margin-left: 0px !important;'><img style='width: 100% !important;' src='temp/4c8165e95198abe352c9eb42c37e3397.png' /></div><div class='quarterPage' style='border: 0px solid red; margin-left: 0px !important;'><img style='width: 100% !important;' src='temp/413375ced4a3b6e00bf588606be73539.png' /></div><div class='quarterPage' style='margin-left: 0px !important;'>

                    <div id="DataTables_Table_1_wrapper" class="dataTables_wrapper no-footer"><div class="row"><div class="col-md-6 col-sm-12"></div><div class="col-md-6 col-sm-12"></div></div><div class="table-scrollable"><table class="table table-striped table-hover user_datatable  dataTable no-footer" id="DataTables_Table_1" role="grid" aria-describedby="DataTables_Table_1_info">
                    <thead>
                    <tr role="row"><th class="sorting_asc hidePrint" tabindex="0" aria-controls="DataTables_Table_1" rowspan="1" colspan="1" aria-sort="ascending" aria-label=": activate to sort column ascending"></th><th class="sorting hidePrint" tabindex="0" aria-controls="DataTables_Table_1" rowspan="1" colspan="1" aria-label="Username: activate to sort column ascending">Username</th><th class="sorting" tabindex="0" aria-controls="DataTables_Table_1" rowspan="1" colspan="1" aria-label="First Name: activate to sort column ascending">First Name</th><th class="sorting" tabindex="0" aria-controls="DataTables_Table_1" rowspan="1" colspan="1" aria-label="Last Name: activate to sort column ascending">Last Name</th></tr>
                    </thead>
                    <tbody>
                    <tr role="row" class="odd">
                            <td>2004</td>
                            <td>7.80</td>
                        </tr><tr role="row" class="even">
                            <td>2010</td>
                            <td>10.40</td>
                        </tr><tr role="row" class="odd">
                            <td>2010</td>
                            <td>9.10</td>
                        </tr><tr role="row" class="even">
                            <td>2010</td>
                            <td>9.10</td>
                        </tr><tr role="row" class="odd">
                            <td>2010</td>
                            <td>9.10</td>
                        </tr><tr role="row" class="even">
                            <td>2010</td>
                            <td>9.10</td>
                        </tr><tr role="row" class="odd">
                            <td>2011</td>
                            <td>20.50</td>
                        </tr><tr role="row" class="even">
                            <td>2011</td>
                            <td>9.10</td>
                        </tr><tr role="row" class="odd">
                            <td>2011</td>
                            <td>9.10</td>
                        </tr><tr role="row" class="even">
                            <td>2011</td>
                            <td>9.10</td>
                        </tr></tbody>
                    </table></div><div class="row"><div class="col-md-5 col-sm-12"></div><div class="col-md-7 col-sm-12"></div></div></div>
                </div></div>

嗨，朋友们，请帮助我解决这个问题，因为我已经尝试了这么久，或者至少有人知道如何将 dompdf 的打印机打印指针再次放在第一页上将下一个元素的其余部分打印到 long html table.

Answer 1

这是由于 dompdf 呈现内容的方式存在限制。您正在使用 display: inline-block; 设计这些元素的样式，但是 this note 关于支持论坛上的浮动适用：

dompdf renders page elements serially. What this means practically is that the floated element must be fully rendered before the next element. If a page breaks is encountered then the following element will be rendered after the page break.

如果您的第一个 table 总是比页面大小长，您应该能够解决此问题。与其将元素样式设置为内联块，不如尝试将它们浮动，例如

<div style="float: right; width: 25%;">
  <!-- right-side table -->
</div>

<div style="float: right; width: 25%;">
  <!-- bar graph -->
</div>

<div style="float: right; width: 25%;">
  <!-- pie chart -->
</div>

<div style="width: 25%;">
  <!-- left-side table -->
</div>

或者，甚至，绝对定位右侧三列并保留最左侧的列。

Dompdf - 如何并排显示 table 和图形？

Dompdf - how to display table and graph sidebyside?

html

css