我正在使用docraptor（https://docraptor.com/samples）来创建PDF，但我无法将Image作为页眉和页脚添加到生成的PDF中。
我有以下Html，我使用AJAX调用API并将HTML下面作为内容传递给crate垫，但它不在页脚和标题中添加Image。它将其添加为内容。
var data = $（'＃container-abc'）。html（）;
<!DOCTYPE html>
<head>
<style type="text/css">
/* setup the page */
@@page {
size: US-Letter;
margin: 0 0 35mm 0;
background: #ffffff;
}
/* setup the footer */
@@page {
@@bottom {
content: flow(footer);
}
}
footer {
flow: static(footer);
}
body {
border-top: 10px solid #3877B1;
font-family: "myriad-pro-1", "myriad-pro-2", sans-serif;
}
#container {
margin: 0 auto;
}
header, #main {
margin: 15mm;
}
header {
margin-top: 5mm;
border-bottom: 1px solid #7E7E7E;
padding-bottom: 5mm;
}
.seller, .status{
float: left;
}
.buyer {
float: right;
}
.seller {
width: 50%;
}
.buyer {
max-width: 30%;
}
.brand {
font-weight: bold;
font-size: 30px;
color: #333;
padding: 10px 0 2px;
overflow: auto;
}
.brand span, .brand img {
float: left;
}
.brand span {
display: block;
margin: 8px 0 0 5px;
}
.seller address {
clear: both;
display: block;
padding-left: 65px;
ont-size: 10pt;
line-height: 12pt;
color: #262626;
}
.seller address span {
display: block;
}
.status.paid {
margin: 25pt 0 0 15pt;
letter-spacing: -1pt;
font-weight: bold;
color: #78E400;
font-size: 30pt;
border: 5px solid #78E400;
padding: 1pt 5pt;
transform: rotate(-15deg);
-ms-transform: rotate(-15deg); /* IE 9 */
-webkit-transform:rotate(-15deg); /* Safari and Chrome */
}
.buyer {
font-size: 9pt;
line-height: 12pt;
margin-top: 30pt;
color: #262626;
}
.buyer h2 {
font-weight: bold;
font-size: 11pt;
}
.buyer span { display: block; }
/* main */
table {
width: 100%;
}
th {
font-size: 8pt;
color: #919191;
line-height: 14pt;
text-align: left;
padding-left: 10pt;
border-bottom: 1px solid #D6D6D6;
}
th:last-child, td:last-child {
width: 20%;
}
th:last-child {
padding-left: 10mm;
}
td {
padding: 10pt;
border-bottom: 1px solid #D6D6D6;
}
td h4 {
font-weight: bold;
font-size: 12pt;
}
td .description {
font-size: 9pt;
line-height: 14pt;
}
td.price {
vertical-align: middle;
font-size: 12pt;
font-weight: bold;
text-align: right;
}
tr:nth-child(odd) td{
background: #F1F1F1;
}
#notes {
font-size: 9pt;
color: #7E7E7E;
line-height: 14pt;
font-style: italic;
margin-top: 4mm;
padding: 3mm;
float: left;
}
#totals{
padding: 3mm;
float: right;
text-align: right;
font-size: 12pt;
color: #7E7E7E;
line-height: 16pt;
}
/* footer */
footer {
text-align: center;
}
footer p {
background: #F3F3F3;
color: #888;
text-align: center;
font-size: 8pt;
line-height: 12pt;
padding: 7mm 0;
margin-top: 2mm;
}
.clearfix{ clear: both; }
</style>
</head>
<body>
<div id="container-abc">
<header>
<div class="seller">
<h1 class="brand">
<img src="http://docraptor.com/assets/docraptor-logo.svg" width="60" height="43" /> <span>DocRaptor</span>
</h1>
<address>
2885 Sanford Ave SW #13508, Grandville, MI 49418-1342
<span class="email">support@docraptor.com</span>
</address>
</div>
<div class="status paid">PAID</div>
<div class="buyer">
<h2>Billed To</h2>
Super Best Client
<span class="email">superbestclient@example.com</span>
<span class="date">January 20, 2014</span>
</div>
<div class="clearfix"></div>
</header>
<div id="main">
<table>
<thead>
<tr>
<th class="title">Summary</th>
<th class="price">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<h4>Max Plan</h4>
<p class="description">March 21, 2014 - April 21, 2014</p>
</td>
<td class="price"><span class="price">$149.00 USD</span></td>
</tr>
<tr>
<td>
<h4>Document Overage</h4>
<p class="description">0 docs $.39</p>
</td>
<td class="price"><span class="price">$0.00 USD</span></td>
</tr>
</tbody>
</table>
<p id="notes">
This charge will appear on your credit card statement as "DOCRAPTOR.COM".
</p>
<div id="totals">
<p>Total: <span class="price">$149.00 USD</span></p>
<p>Due: <span class="price">$0.00 USD</span></p>
</div>
<table>
<thead>
<tr>
<th class="title">Summary</th>
<th class="price">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<h4>Max Plan</h4>
<p class="description">March 21, 2014 - April 21, 2014</p>
</td>
<td class="price"><span class="price">$149.00 USD</span></td>
</tr>
<tr>
<td>
<h4>Document Overage</h4>
<p class="description">0 docs $.39</p>
</td>
<td class="price"><span class="price">$0.00 USD</span></td>
</tr>
</tbody>
</table>
<p id="notes">
This charge will appear on your credit card statement as "DOCRAPTOR.COM".
</p>
<div id="totals">
<p>Total: <span class="price">$149.00 USD</span></p>
<p>Due: <span class="price">$0.00 USD</span></p>
</div>
<table>
<thead>
<tr>
<th class="title">Summary</th>
<th class="price">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<h4>Max Plan</h4>
<p class="description">March 21, 2014 - April 21, 2014</p>
</td>
<td class="price"><span class="price">$149.00 USD</span></td>
</tr>
<tr>
<td>
<h4>Document Overage</h4>
<p class="description">0 docs $.39</p>
</td>
<td class="price"><span class="price">$0.00 USD</span></td>
</tr>
</tbody>
</table>
<p id="notes">
This charge will appear on your credit card statement as "DOCRAPTOR.COM".
</p>
<div id="totals">
<p>Total: <span class="price">$149.00 USD</span></p>
<p>Due: <span class="price">$0.00 USD</span></p>
</div>
</div>
<footer>
<img alt="Expected Behavior Logo" height="34" src="https://docraptor.com/assets/expected-behavior-logo.svg" width="150" />
<p>DocRaptor is made and supported by Expected Behavior, LLC<br>1-866-991-3746 | 2885 Sanford Ave SW #13508, Grandville, MI 49418-1342 | support@docraptor.com</p>
</footer>
</div>
</body>
</html>
答案 0 :(得分：1)
至少部分问题是在处理页面和页面底部样式时使用@@而不是单数@。我把它们改成了单数，然后从DocRaptor那里找到了一个更健全的PDF。
以下是每个页面上页眉和页脚中都有图像的最小示例。
<html>
<head>
<style type="text/css">
@page {
@top { content: flow(header) };
@bottom { content: flow(footer) };
}
header { flow: static(header); }
footer { flow: static(footer); }
hr { page-break-after: always; }
</style>
</head>
<body>
<header>
<img src="http://i.imgur.com/MtMwkBX.png" />
</header>
<footer>
<img src="http://i.imgur.com/ZZw85mx.png" />
</footer>
<p>This is the first page.</p>
<hr />
<p>This is the second page.</p>
<hr />
<p>This is the third page.</p>
</body>
</html>