如何使用WeasyPrint在不同页面的同一个地方设置一个header？

Question

我们正在使用 WeasyPrint 版本：53.4 & Python 版本：3.9.1 从 html 模板生成 PDF。但是我们在第一页之后的运行 header 对齐中遇到了问题。它与 issue 完全相同，并且该问题的解决方案对我们不起作用。我将在这里更新示例代码：

Python :

from weasyprint import HTML, CSS

def new_test(request):
    pdf_file = HTML("invoice.html").write_pdf(stylesheets=[CSS("invoice.css")])
    response = HttpResponse(pdf_file,content_type="application/pdf")
    response["Content-Disposition"] = "attachment;filename=print_final.pdf"
    return response

HTML 和 CSS :

body {
  margin-top: 4.5cm;
  border: 0.1cm solid red;
  font-family: Arial, Helvetica, sans-serif;
  height: 20cm;
  width: 100%;
}

header {
  position: running(header);
  border: 0.1cm solid black;
  height: 5cm;
  width: 17cm;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 5cm;
  padding-top: 0cm;
}
.header_text {
  text-align: right;
  padding-right: 0;
  /* position: fixed; */
  width: 100%;
}
footer {
  position: running(footer);
  border: 0.1cm solid blue;
  height: 1cm;
}
@page {
  @top-center {
    content: element(header);
    width: 100%;
  }
  @bottom-center {
    content: element(footer);
    width: 100%;
  }
  size: A4;
}

<html>
  <head>
    <meta charset="utf-8" />
    <link href="invoice.css" media="print" rel="stylesheet" />
    <title>Invoice</title>
    <meta name="description" content="Invoice demo sample" />
  </head>

  <header id="header" class="header">
    <div class="header_text">
      <p>Company logo</p>
      <p>Company XYZ - NewCity</p>
      <p>Address - Contact Details</p>
      <p>Webbsite Info</p>
      <p>Phone Number</p>
    </div>
  </header>

  <body>
    <h3>Table 1</h3>
    <table>
      <thead>
        <tr>
          <th>Description</th>
          <th>Price</th>
          <th>Quantity</th>
          <th>Subtotal</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Website design</td>
          <td>€34.20</td>
          <td>100</td>
          <td>€3,420.00</td>
        </tr>
        <tr>
          <td>Website development</td>
          <td>€45.50</td>
          <td>100</td>
          <td>€4,550.00</td>
        </tr>
        <tr>
          <td>Website integration</td>
          <td>€25.75</td>
          <td>100</td>
          <td>€2,575.00</td>
        </tr>
        <tr>
          <td>Website integration</td>
          <td>€25.75</td>
          <td>100</td>
          <td>€2,575.00</td>
        </tr>
        <tr>
          <td>Website integration</td>
          <td>€25.75</td>
          <td>100</td>
          <td>€2,575.00</td>
        </tr>
        <tr>
          <td>Website integration</td>
          <td>€25.75</td>
          <td>100</td>
          <td>€2,575.00</td>
        </tr>
        <tr>
          <td>Website integration</td>
          <td>€25.75</td>
          <td>100</td>
          <td>€2,575.00</td>
        </tr>
      </tbody>
    </table>

    <h3>Table 2</h3>
    <table>
      <thead>
        <tr>
          <th>Description</th>
          <th>Price</th>
          <th>Quantity</th>
          <th>Subtotal</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Website design</td>
          <td>€34.20</td>
          <td>100</td>
          <td>€3,420.00</td>
        </tr>
        <tr>
          <td>Website development</td>
          <td>€45.50</td>
          <td>100</td>
          <td>€4,550.00</td>
        </tr>
        <tr>
          <td>Website integration</td>
          <td>€25.75</td>
          <td>100</td>
          <td>€2,575.00</td>
        </tr>
        <tr>
          <td>Website integration</td>
          <td>€25.75</td>
          <td>100</td>
          <td>€2,575.00</td>
        </tr>
        <tr>
          <td>Website integration</td>
          <td>€25.75</td>
          <td>100</td>
          <td>€2,575.00</td>
        </tr>
        <tr>
          <td>Website integration</td>
          <td>€25.75</td>
          <td>100</td>
          <td>€2,575.00</td>
        </tr>
        <tr>
          <td>Website integration</td>
          <td>€25.75</td>
          <td>100</td>
          <td>€2,575.00</td>
        </tr>
      </tbody>
    </table>

    <h3>Table 3</h3>
    <table>
      <thead>
        <tr>
          <th>Description</th>
          <th>Price</th>
          <th>Quantity</th>
          <th>Subtotal</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Website design</td>
          <td>€34.20</td>
          <td>100</td>
          <td>€3,420.00</td>
        </tr>
        <tr>
          <td>Website development</td>
          <td>€45.50</td>
          <td>100</td>
          <td>€4,550.00</td>
        </tr>
        <tr>
          <td>Website integration</td>
          <td>€25.75</td>
          <td>100</td>
          <td>€2,575.00</td>
        </tr>
        <tr>
          <td>Website integration</td>
          <td>€25.75</td>
          <td>100</td>
          <td>€2,575.00</td>
        </tr>
        <tr>
          <td>Website integration</td>
          <td>€25.75</td>
          <td>100</td>
          <td>€2,575.00</td>
        </tr>
        <tr>
          <td>Website integration</td>
          <td>€25.75</td>
          <td>100</td>
          <td>€2,575.00</td>
        </tr>
        <tr>
          <td>Website integration</td>
          <td>€25.75</td>
          <td>100</td>
          <td>€2,575.00</td>
        </tr>
      </tbody>
    </table>

    <h3>Table 4</h3>
    <table>
      <thead>
        <tr>
          <th>Description</th>
          <th>Price</th>
          <th>Quantity</th>
          <th>Subtotal</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Website design</td>
          <td>€34.20</td>
          <td>100</td>
          <td>€3,420.00</td>
        </tr>
        <tr>
          <td>Website development</td>
          <td>€45.50</td>
          <td>100</td>
          <td>€4,550.00</td>
        </tr>
        <tr>
          <td>Website integration</td>
          <td>€25.75</td>
          <td>100</td>
          <td>€2,575.00</td>
        </tr>
        <tr>
          <td>Website integration</td>
          <td>€25.75</td>
          <td>100</td>
          <td>€2,575.00</td>
        </tr>
        <tr>
          <td>Website integration</td>
          <td>€25.75</td>
          <td>100</td>
          <td>€2,575.00</td>
        </tr>
        <tr>
          <td>Website integration</td>
          <td>€25.75</td>
          <td>100</td>
          <td>€2,575.00</td>
        </tr>
         <tr>
          <td>Website integration</td>
          <td>€25.75</td>
          <td>100</td>
          <td>€2,575.00</td>
        </tr>
         <tr>
          <td>Website integration</td>
          <td>€25.75</td>
          <td>100</td>
          <td>€2,575.00</td>
        </tr>
         <tr>
          <td>Website integration</td>
          <td>€25.75</td>
          <td>100</td>
          <td>€2,575.00</td>
        </tr>
        <tr>
          <td>Website integration</td>
          <td>€25.75</td>
          <td>100</td>
          <td>€2,575.00</td>
        </tr>
      </tbody>
    </table>
  </body>

  <footer>This is a footer test</footer>
</html>

我们在第一页的正确位置获得了 header，但之后就不是预期的那样了。我们尝试更新第二页等的 CSS，但没有成功。

第 1 & 2 页：

谢谢！

Answer 1

body {
  border: 0.1cm solid red;
  box-decoration-break: clone;
}

header {
  /* position: running(header); */
  position: fixed;
  border: 0.1cm solid black;
  top: -5cm;
  width: 100%;
}
footer {
  position: fixed;
  border: 0.1cm solid blue;
  height: 1cm;
  bottom: -2cm;
  width: 100%;
}
@page {
  @top-center {
    content: element(header);
    width: 100%;
    margin-top: 5cm;
  }
  @bottom-center {
    content: element(footer);
    width: 100%;
  }
  size: A4;
  margin-top: 6cm;
}

<html>
  <head>
    <meta charset="utf-8" />
    <link href="invoice.css" media="print" rel="stylesheet" />
    <title>Invoice</title>
    <meta name="description" content="Invoice demo sample" />
  </head>

  <header id="header" class="header">
    <div class="header_text">
      <p>Company logo</p>
      <p>Company XYZ - NewCity</p>
      <p>Address - Contact Details</p>
      <p>Webbsite Info</p>
      <p>Phone Number</p>
    </div>
  </header>

  <body>
    <div class="body_text">
      <h3>Table 1</h3>
      <table>
        <thead>
          <tr>
            <th>Description</th>
            <th>Price</th>
            <th>Quantity</th>
            <th>Subtotal</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Website design</td>
            <td>€34.20</td>
            <td>100</td>
            <td>€3,420.00</td>
          </tr>
          <tr>
            <td>Website development</td>
            <td>€45.50</td>
            <td>100</td>
            <td>€4,550.00</td>
          </tr>
          <tr>
            <td>Website integration</td>
            <td>€25.75</td>
            <td>100</td>
            <td>€2,575.00</td>
          </tr>
          <tr>
            <td>Website integration</td>
            <td>€25.75</td>
            <td>100</td>
            <td>€2,575.00</td>
          </tr>
          <tr>
            <td>Website integration</td>
            <td>€25.75</td>
            <td>100</td>
            <td>€2,575.00</td>
          </tr>
          <tr>
            <td>Website integration</td>
            <td>€25.75</td>
            <td>100</td>
            <td>€2,575.00</td>
          </tr>
          <tr>
            <td>Website integration</td>
            <td>€25.75</td>
            <td>100</td>
            <td>€2,575.00</td>
          </tr>
        </tbody>
      </table>

      <h3>Table 2</h3>
      <table>
        <thead>
          <tr>
            <th>Description</th>
            <th>Price</th>
            <th>Quantity</th>
            <th>Subtotal</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Website design</td>
            <td>€34.20</td>
            <td>100</td>
            <td>€3,420.00</td>
          </tr>
          <tr>
            <td>Website development</td>
            <td>€45.50</td>
            <td>100</td>
            <td>€4,550.00</td>
          </tr>
          <tr>
            <td>Website integration</td>
            <td>€25.75</td>
            <td>100</td>
            <td>€2,575.00</td>
          </tr>
          <tr>
            <td>Website integration</td>
            <td>€25.75</td>
            <td>100</td>
            <td>€2,575.00</td>
          </tr>
          <tr>
            <td>Website integration</td>
            <td>€25.75</td>
            <td>100</td>
            <td>€2,575.00</td>
          </tr>
          <tr>
            <td>Website integration</td>
            <td>€25.75</td>
            <td>100</td>
            <td>€2,575.00</td>
          </tr>
          <tr>
            <td>Website integration</td>
            <td>€25.75</td>
            <td>100</td>
            <td>€2,575.00</td>
          </tr>
        </tbody>
      </table>

      <h3>Table 3</h3>
      <table>
        <thead>
          <tr>
            <th>Description</th>
            <th>Price</th>
            <th>Quantity</th>
            <th>Subtotal</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Website design</td>
            <td>€34.20</td>
            <td>100</td>
            <td>€3,420.00</td>
          </tr>
          <tr>
            <td>Website development</td>
            <td>€45.50</td>
            <td>100</td>
            <td>€4,550.00</td>
          </tr>
          <tr>
            <td>Website integration</td>
            <td>€25.75</td>
            <td>100</td>
            <td>€2,575.00</td>
          </tr>
          <tr>
            <td>Website integration</td>
            <td>€25.75</td>
            <td>100</td>
            <td>€2,575.00</td>
          </tr>
          <tr>
            <td>Website integration</td>
            <td>€25.75</td>
            <td>100</td>
            <td>€2,575.00</td>
          </tr>
          <tr>
            <td>Website integration</td>
            <td>€25.75</td>
            <td>100</td>
            <td>€2,575.00</td>
          </tr>
          <tr>
            <td>Website integration</td>
            <td>€25.75</td>
            <td>100</td>
            <td>€2,575.00</td>
          </tr>
        </tbody>
      </table>

      <h3>Table 4</h3>
      <table>
        <thead>
          <tr>
            <th>Description</th>
            <th>Price</th>
            <th>Quantity</th>
            <th>Subtotal</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Website design</td>
            <td>€34.20</td>
            <td>100</td>
            <td>€3,420.00</td>
          </tr>
          <tr>
            <td>Website development</td>
            <td>€45.50</td>
            <td>100</td>
            <td>€4,550.00</td>
          </tr>
          <tr>
            <td>Website integration</td>
            <td>€25.75</td>
            <td>100</td>
            <td>€2,575.00</td>
          </tr>
          <tr>
            <td>Website integration</td>
            <td>€25.75</td>
            <td>100</td>
            <td>€2,575.00</td>
          </tr>
          <tr>
            <td>Website integration</td>
            <td>€25.75</td>
            <td>100</td>
            <td>€2,575.00</td>
          </tr>
          <tr>
            <td>Website integration</td>
            <td>€25.75</td>
            <td>100</td>
            <td>€2,575.00</td>
          </tr>
          <tr>
            <td>Website integration</td>
            <td>€25.75</td>
            <td>100</td>
            <td>€2,575.00</td>
          </tr>
        </tbody>
      </table>

      <h3>Table 5</h3>
      <table>
        <thead>
          <tr>
            <th>Description</th>
            <th>Price</th>
            <th>Quantity</th>
            <th>Subtotal</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Website design</td>
            <td>€34.20</td>
            <td>100</td>
            <td>€3,420.00</td>
          </tr>
          <tr>
            <td>Website development</td>
            <td>€45.50</td>
            <td>100</td>
            <td>€4,550.00</td>
          </tr>
          <tr>
            <td>Website integration</td>
            <td>€25.75</td>
            <td>100</td>
            <td>€2,575.00</td>
          </tr>
          <tr>
            <td>Website integration</td>
            <td>€25.75</td>
            <td>100</td>
            <td>€2,575.00</td>
          </tr>
          <tr>
            <td>Website integration</td>
            <td>€25.75</td>
            <td>100</td>
            <td>€2,575.00</td>
          </tr>
          <tr>
            <td>Website integration</td>
            <td>€25.75</td>
            <td>100</td>
            <td>€2,575.00</td>
          </tr>
          <tr>
            <td>Website integration</td>
            <td>€25.75</td>
            <td>100</td>
            <td>€2,575.00</td>
          </tr>
        </tbody>
      </table>

      <h3>Table 6</h3>
      <table>
        <thead>
          <tr>
            <th>Description</th>
            <th>Price</th>
            <th>Quantity</th>
            <th>Subtotal</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Website design</td>
            <td>€34.20</td>
            <td>100</td>
            <td>€3,420.00</td>
          </tr>
          <tr>
            <td>Website development</td>
            <td>€45.50</td>
            <td>100</td>
            <td>€4,550.00</td>
          </tr>
          <tr>
            <td>Website integration</td>
            <td>€25.75</td>
            <td>100</td>
            <td>€2,575.00</td>
          </tr>
          <tr>
            <td>Website integration</td>
            <td>€25.75</td>
            <td>100</td>
            <td>€2,575.00</td>
          </tr>
          <tr>
            <td>Website integration</td>
            <td>€25.75</td>
            <td>100</td>
            <td>€2,575.00</td>
          </tr>
          <tr>
            <td>Website integration</td>
            <td>€25.75</td>
            <td>100</td>
            <td>€2,575.00</td>
          </tr>
          <tr>
            <td>Website integration</td>
            <td>€25.75</td>
            <td>100</td>
            <td>€2,575.00</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>

  <footer>This is a footer test</footer>
</html>

已修复！

如何使用WeasyPrint在不同页面的同一个地方设置一个header？

How to set a header in the same place across different pages by using WeasyPrint?

html

css

pdf-generation

weasyprint

django-weasyprint