使用DOMPDF创建具有不同颜色的每个页面背景的pdf

时间:2016-04-15 06:45:22

标签: codeigniter dompdf

我使用 codeigniter 中的 DOMPDF 生成报告。这个pdf有10页,其中3页有黄色背景(页面#2,#5和#8,整个页面bgcolor需要是黄色,没有边距或间距)其余页面背景颜色是白色。

此外,我通过将“ DOMPDF_ENABLE_HTML5PARSER ”配置为true来使用DOMPDF的 html5解析器。这是因为我的报告html包含像页脚这样的html5标签。

  

我用Google搜索并发现了一个解决方案,将每个页面放在单独的“ body ”标记中,但生成的输出将所有页面都放在黄色背景中。

以下是我的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>

任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:1)

我不能说我会推荐这种方法,但是如果你禁用HTML5解析器它可能会有效。 dompdf中HTML5解析器的主要用途是纠正语法错误。不允许使用多个BODY元素,因此在通过HTML5解析器后,多个body元素将合并为一个元素。