2016-05-31 59 views
-1

我正在網站上開發一個模塊,將一些報告導出爲pdf。在谷歌搜索哪種類型的庫可以幫助我後,我發現DOMPDF(PHP)。DomPDF不適用於div表嗎?

我創建並正確顯示PDF,但我必須創建與表格,TR和TD的HTML,因爲當我嘗試顯示相同的使用顯示選項設置在表,錶行或表格單元格上的div不起作用並且不以正確的製表格式顯示數據。

這是一個問題,因爲在視圖中我嘗試使用div和responsiv設計,但是當我作爲參數傳遞這個html時它不起作用。通過這個事實,當我測試這個時,我不得不用這兩個html代碼創建一個視圖。第一個視圖使用div設計渲染,另一個使用作爲參數傳遞給dompdf渲染的表標記。

任何一個如果是編程問題,dompdf問題或其他?

任何建議welcomen。

在這裏,代碼

   <link href="pdf.css" rel="stylesheet" type="text/css" media="screen" /> 
       <div class="tabledivinscripcion"> 
       <div class="titular-inscripcion"> 
         <img id="header" class="headers" src="ImagenesNoticias/'.$row_headers["timestamp"].'_'.$row_headers["header"].'"/> 
       </div> 

       <table> 
        <tr> 
         <td colspan="1"> <b>INFORME DE:</b>'.$row["nombreInforme"].'</td> 
         <td colspan="1" > <b>Categoría:</b>'.$row["categoria"].'</td> 
        </tr>     
        <tr> 
         <td colspan="1"> <b>Fecha:</b>'.$row["fecha"].'</td> 
         <td colspan="1"> <b>Hora:</b>'.$row["hora"].'</td> 
        </tr> 
        <tr> 
         <td colspan="1"> <b>Nombre:</b>'.$row["nombre"].'</td> 
         <td colspan="1"> <b>Licencia:</b>'.$row["licencia"].'</td> 
        </tr> 
        <tr> 
         <td colspan="1"> <b>Categoría:</b>'.$row["categoria2"].'</td> 
         <td colspan="1"> <b>Manga:</b>'.$row["manga"].'</td> 
        </tr> 
        <tr> 
         <td colspan="2"> <b>Hora del hecho::</b>'.$row["horaHecho"].'</td> 
        </tr> 
        <tr> 
         <td colspan="2"> <b>Descripción:</b> 
          <br> 
          <p class="justified">'.$row["descripcion"].'</p> 
          <br> 
         </td> 
        </tr> 
        <div class="titular-inscripcion foot"> 
          <img id="footer" class="headers" src="ImagenesNoticias/'.$row_headers["timestamp"].'_'.$row_headers["footer"].'"/> 
        </div> 

這裏的CSS

.headers{ 
    width:100%; 
    } 
    td{ 
    //border:1px solid black; 
    text-align:left; 
    height:25px; 
    } 
tr{ 
    //border:1px solid red; 
} 
table{ 
    // border:1px solid green; 
    height:75%; 
    width:85%; 
    margin-left:auto; 
    margin-right:auto 
} 
.justified{ 
    text-align:justify; 
} 
.tabledivinscripcion{ 
    background:#FFF; 
    margin-bottom:20px; 
    padding:0px; 
    position:relative; 
    width:100%; 
    min-height:100%; 
    margin-left:auto; 
    margin-right:auto; 
} 
.foot{ 
    position: absolute; 
bottom: 0; 
} 
.pdescripcion{ 
    text-align: justify; 
    display:inline-block; 
    padding-left:10px; 
    padding-right:10px; 
} 
.titular-inscripcion{ 
    margin-left:auto; 
    margin-right:auto; 
    text-align:center; 
    display:table; 
    width: 100%; /*Optional*/ 
    table-layout: fixed; /*Optional*/ 
} 

附此代碼是PDF的最終版本。爲了做到這一點與div的我試圖把div與顯示:表作爲表標記,和div與顯示:錶行作爲tr標記,最後div與顯示:table-cell作爲td標記。

謝謝。

+0

請分享您所使用的HTML/CSS的一個樣本。 – BrianS

回答

0

Dompdf可以處理使用CSS表格顯示類型構建的表格。例如,以下代碼應該以100%的寬度顯示兩列的表格。您會注意到特定於表格的屬性將根據情況適用。在第一行和第二行中的單個生成列中。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
 
    <style> 
 
    .table { display: table; width: 100%; border-collapse: collapse; } 
 
    .table-row { display: table-row; } 
 
    .table-cell { display: table-cell; border: 1px solid black; padding: 1em; } 
 
    </style> 
 
</head> 
 
<body> 
 
    <div class="table"> 
 
    <div class="table-row"> 
 
     <div class="table-cell"><b>INFORME DE:</b>dompdf</div> 
 
     <div class="table-cell"><b>Categoría:</b>tables</div> 
 
    </div> 
 
    <div class="table-row"> 
 
     <div class="table-cell" colspan="2"> <b>Hora del hecho:</b>9:00</div> 
 
    </div> 
 
    </div> 
 
</body> 
 
</html>

什麼它不支持爲當前版本(0.7.0作爲這一職位的)的是,涉及到響應式設計,如媒體查詢(不僅僅侷限於那些針對特定CSS聲明顯示類型,例如@media print)。

不再創建你應該考慮的各種顯示環境中創建多個樣式表的多個結構元素(表和DIV表)頁面。您可以通過圍繞相關的CSS @media dompdf { ... }來始終在樣式表中定位dompdf。