CODEWITHSUNDEEP
codeigniterdompdf
d.coder
d.coder

Reputation: 2038

Create pdf having each page background in different color using DOMPDF

I am generating reports using DOMPDF in codeigniter. This pdf have 10 pages in which 3 pages have yellow background (Page #2, #5 and #8 and entire page bgcolor needs to be yellow without margin or spacing) rest pages background color is white.

Also, i am using DOMPDF's html5 parser by setting "DOMPDF_ENABLE_HTML5PARSER" config as true. This is because my report html's contains html5 tags like footer.

I googled this and found one solution as to put each page in separate "body" tag but generated output have all pages in yellow background.

Below is my html template:

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

Any help will be appreciated.

Upvotes: 0

Views: 2019

Answers (1)

BrianS
BrianS

Reputation: 13914

I can't say that I would recommend this method, but it might work if you disable the HTML5 parser. The main use of the HTML5 parser in dompdf is to correct syntactical errors. Multiple BODY elements are not permitted and so after passing through the HTML5 parser the multiple body elements will be merged into a single element.

Upvotes: 1

Related Questions