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

【问题标题】：Create pdf having each page background in different color using DOMPDF使用 DOMPDF 创建每个页面背景颜色不同的 pdf
【发布时间】：2016-04-15 06:45:22
【问题描述】：

我在 codeigniter 中使用 DOMPDF 生成报告。此 pdf 有 10 页，其中 3 页为黄色背景（第 #2、#5 和 #8 页，整个页面 bgcolor 需要为黄色，没有边距或间距）其余页面背景颜色为白色。

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

我搜索了这个并找到了一种解决方案，将每个页面放在单独的“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>

任何帮助将不胜感激。

【问题讨论】：

我不能说我会推荐这种方法，但如果您禁用 HTML5 解析器，它可能会起作用。这个解析器在 dompdf 中的主要用途是纠正语法错误。不允许有多个 BODY 元素，因此在通过 HTML5 解析器后，多个 body 元素将合并为一个元素。
不过，我现在真的没有其他解决方案，所以继续吧。
禁用 HTML5 解析器 实际上对我有用。感谢您的建议，抱歉回复晚了。
很高兴知道。添加为任何以这种方式徘徊的人的答案。

标签： codeigniter dompdf

【解决方案1】：

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

【讨论】：