2016-05-31 12 views
-1

私はいくつかのレポートをpdfに書き出すためにウェブサイト上にモジュールを開発しています。 GoogleでDOMPDF(php)を見つけたときに、どのようなライブラリが役に立つのかを調べた後、DomPDFはdivテーブルでは機能しませんか?

私はpdfを正しく作成して表示していますが、テーブル、tr、tdでhtmlを作成する必要があります。これは、テーブル、テーブル行、正常に動作せず、データを正しい表形式で表示しません。

ビューではdivとresponsivデザインを使用しようとしていますが、このhtmlではパラメータとして渡すと問題が発生するため、これは問題です。この事実によって私はこれをテストしていますが、両方のHTMLコードでビューを作成しなければなりませんでした。最初のビューはdivデザインでレンダリングされ、もう1つはdompdfレンダリングにパラメータとして渡されるテーブルタグでレンダリングされます。

プログラミング上の問題、dompdfの問題などがありますか?

ご意見は歓迎します。

ここコードここ

   <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を使って同じことをするには、display:tableをtableタグとして、div:display:table-rowをtrタグとして、最後にdisplay:table-cellをdivタグとしてdivを入れようとしました。

ありがとうございます。

+0

使用しているHTML/CSSのサンプルを共有してください。 – BrianS

答えて

0

Dompdfは、CSSテーブルの表示タイプを使用して作成されたテーブルで動作します。たとえば、次の例では、2列の100%幅の表が表示されます。テーブル固有の属性が適切に適用されることに気づくでしょう。第1行目と第2行目の1つのスパニング列。

<!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を常にターゲットにすることができます。

関連する問題