2016-04-15 8 views
0

DOMPDFcodeigniterで作成しています。このpdfには3ページが黄色の背景(ページ#2、#5、#8)を持つ10ページがあり、ページ全体の背景色は白です。DOMPDFを使用して各ページの背景を異なる色で作成する

また、私は真の "DOMPDF_ENABLE_HTML5PARSER" コンフィグを設定することにより、DOMPDFのHTML5パーサを使用しています。これは、私のレポートのhtmlにはfooterのようなhtml5タグが含まれているからです。

私は黄色の背景にあるすべてのページを持って、これをGoogleで検索し、別の「」タグ内の各ページに配置するように、1つの解決策が見つかりましたが、生成された出力。以下は

私のHTMLテンプレートです:

<!doctype html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Report</title> 
 
    <link rel="stylesheet" href="css/reports/styles.css" /> 
 
</head> 
 

 
<!-- Page #1 --> 
 

 
<body> 
 
    <div> 
 
    <div class="wrapper"> 
 
     <h1>Heading</h1> 
 
     <ul class="index"> 
 
     <li>2. report 1</li> 
 
     <li>5. report 2</li> 
 
     <li>8. report 3</li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
<!-- Page #2 --> 
 

 
<body style="background-color: #f2ab02"> 
 
    <div> 
 
    <div class="wrapper"> 
 
     <h1>Report 1: Analysis &amp; Results</h1> 
 
     <img src="/img/reports/human-face.png" class="imglogo" /> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
<!-- Page #3 --> 
 

 
<body> 
 
    <div> 
 
    <h1>Report 1: (1/2)</h1> 
 
    <table>...</table> 
 
    <footer> 
 
     <img src="/img/reports/logo.png" class="footer-logo" /> 
 
     <div class="page_number">3</div> 
 
    </footer> 
 
    </div> 
 
</body> 
 

 
<!-- Page #4 --> 
 

 
<body> 
 
    <div> 
 
    <h1>Report 1: (2/2)</h1> 
 
    <table>...</table> 
 
    <footer> 
 
     <img src="/img/reports/logo.png" class="footer-logo" /> 
 
     <div class="page_number">4</div> 
 
    </footer> 
 
    </div> 
 
</body> 
 

 
<!-- Page #5 --> 
 

 
<body style="background-color: #f2ab02"> 
 
    <div> 
 
    <div class="wrapper"> 
 
     <h1>Report 2: Analysis &amp; Results</h1> 
 
     <img src="/img/reports/human-face.png" class="imglogo" /> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
<!-- Page #6 --> 
 

 
<body> 
 
    <div> 
 
    <h1>Report 2: (1/2)</h1> 
 
    <table>...</table> 
 
    <footer> 
 
     <img src="/img/reports/logo.png" class="footer-logo" /> 
 
     <div class="page_number">6</div> 
 
    </footer> 
 
    </div> 
 
</body> 
 

 
<!-- Page #7 --> 
 

 
<body> 
 
    <div> 
 
    <h1>Report 2: (2/2)</h1> 
 
    <table>...</table> 
 
    <footer> 
 
     <img src="/img/reports/logo.png" class="footer-logo" /> 
 
     <div class="page_number">7</div> 
 
    </footer> 
 
    </div> 
 
</body> 
 

 
<!-- Page #8 --> 
 

 
<body style="background-color: #f2ab02"> 
 
    <div> 
 
    <h1>Report 3: Analysis &amp; Results</h1> 
 
    <img src="/img/reports/human-face.png" class="imglogo" /> 
 
    </div> 
 
</body> 
 

 
<!-- Page #9 --> 
 

 
<body> 
 
    <div> 
 
    <h1>Report 3: (1/2)</h1> 
 
    <table>...</table> 
 
    <footer> 
 
     <img src="/img/reports/logo.png" class="footer-logo" /> 
 
     <div class="page_number">9</div> 
 
    </footer> 
 
    </div> 
 
</body> 
 

 
<!-- Page #10 --> 
 

 
<body> 
 
    <div> 
 
    <h1>Report 3: (2/2)</h1> 
 
    <table>...</table> 
 
    <footer> 
 
     <img src="/img/reports/logo.png" class="footer-logo" /> 
 
     <div class="page_number">10</div> 
 
    </footer> 
 
    </div> 
 
</body> 
 

 
</html>

任意の助けが理解されるであろう。

+0

私はこの方法をお勧めしたいとは言えませんが、HTML5パーサー*を無効にすると機能するかもしれません。 dompdfでのこのパーサーの主な用途は、構文上の誤りを訂正することです。複数のBODY要素は許可されていないため、HTML5パーサを通過した後、複数のbody要素が単一の要素にマージされます。 – BrianS

+0

私は実際には今のところ別の解決策はありません。 – BrianS

+0

_HTML5パーサ_を無効にすると、実際に私のために働いていました。ご回答いただきありがとうございます。 –

答えて

1

この方法をお勧めしますが、HTML5パーサーを無効にすると動作する可能性があります。 dompdfのHTML5パーサの主な用途は、構文エラーを修正することです。複数のBODY要素は許可されていないため、HTML5パーサを通過した後、複数のbody要素が単一の要素にマージされます。

関連する問題