Dompdf - 如何顯示錶格和圖形sidebyside？

我有一個關於DOMPDF因爲什麼，我試圖做的一個問題是在一個行上一行所以4 HTML不同的部分打印的一切：喜歡這個工作的罰款截圖1： Dompdf - 如何顯示錶格和圖形sidebyside？

但如果我有第一個表只要長桌子，它會打破一切，我不能得到與第一個截圖相同的輸出。

我的代碼是非常簡單的，我知道這一定是一些快速的HTML/CSS的修復，但我不知道我也可以設置打印的指針重回巔峯所以screenshot- 1甚至在打印後管理第一張長桌？

<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的打印機打印指針在第一次再放頁面將下一個元素的其餘部分打印到長html表格中。

來源

2015-10-19 user2268488

這是由於dompdf呈現內容的限制。你的造型這些元素與display: inline-block;，但在支持論壇this note關於彩車適用：

DOMPDF渲染頁面元素串聯。這實際上意味着浮動元素必須在下一個元素之前完全呈現。如果遇到分頁符，則會在分頁符後顯示以下元素。

如果您的第一張表總是長於頁面大小的，那麼您應該能夠解決該問題。而不是將元素設置爲內嵌塊，您可以嘗試將它們浮動，例如

<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>

或者，甚至，絕對定位正確的三列和離開最左邊的列如上。

來源

2015-10-20 17:13:32 BrianS

嗨，布賴恩，我已經想到了這個想法，但輸入是不可預測的意味着有時我有第一個表更長或有時第三表會更長或有時在這種情況下兩個表更長這種想法將無法正常工作..如果我知道不知何故，我可以重新設置打印指針回到第一頁上，如果你知道任何事情比讓我知道，但非常感謝，因爲你是一個回到我的感謝兄弟。 – user2268488

是的，在那個時候你可以做的不多。我已經做了一些預先渲染的內容，後來我使用腳本進行了渲染，但內容只是一個頁面。告訴dompdf返回到一個較早的頁面是一個有趣的想法，我將不得不看看我能否弄清楚。 – BrianS

哦，正如支持論壇上的那篇文章中提到的那樣，可以工作的一種方法是將每個部分渲染爲單獨的文檔並使用諸如FPDF之類的東西來合併它們。 – BrianS

Dompdf - 如何顯示錶格和圖形sidebyside？

回答

相關問題