使用 DOMPDF 创建具有不同颜色的每个页面背景的 pdf
Create pdf having each page background in different color using DOMPDF
我在 codeigniter 中使用 DOMPDF 生成报告。这个 pdf 有 10 页,其中 3 页有黄色背景(第 #2、#5 和 #8 页和整个页面 bgcolor 需要是黄色,没有边距或间距)其余页面背景颜色是白色。
此外,我正在使用 DOMPDF 的 html5 解析器 ,方法是将“DOMPDF_ENABLE_HTML5PARSER”配置设置为 true。这是因为我的报告 html 包含 html5 标签,如页脚。
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.
下面是我的 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 & 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 & 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 & 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中HTML5解析器的主要用途是纠正语法错误。不允许使用多个 BODY 元素,因此在通过 HTML5 解析器后,多个主体元素将合并为一个元素。
我在 codeigniter 中使用 DOMPDF 生成报告。这个 pdf 有 10 页,其中 3 页有黄色背景(第 #2、#5 和 #8 页和整个页面 bgcolor 需要是黄色,没有边距或间距)其余页面背景颜色是白色。
此外,我正在使用 DOMPDF 的 html5 解析器 ,方法是将“DOMPDF_ENABLE_HTML5PARSER”配置设置为 true。这是因为我的报告 html 包含 html5 标签,如页脚。
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.
下面是我的 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 & 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 & 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 & 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中HTML5解析器的主要用途是纠正语法错误。不允许使用多个 BODY 元素,因此在通过 HTML5 解析器后,多个主体元素将合并为一个元素。