Weasy-print конвертация в pdf с пограничным изображением

Я пытаюсь создать pdf-файл для квитанции об оплате. Но я не могу понять, как мне установить границы для него.

Для границы я использую это изображение Like This . Но при конвертации в pdf следующая страница становится Like this

Как сделать постоянную границу для всех страниц

Код Python + Django:

    from weasyprint import HTML
    html_string = render_to_string('receipt.html', DATA)
    html = HTML(string=html_string)
    result = html.write_pdf()
    f = open(str(os.path.join(MEDIA_URL + "invoice_receipt/", 'temp.pdf')), 'wb')
    f.write(result)
    file_obj = File(open(MEDIA_URL + "invoice_receipt/" + "temp.pdf", 'rb'))
    transaction.receipt_file = file_obj
    transaction.save()

шаблон receipt.html:

    <style>
      table tbody tr td{
        border-top: unset !important;
      }

      table tbody tr:nth-child(7) td,
      table tbody tr:nth-child(8) td,
      table tbody tr:nth-child(9) td,
      table tbody tr:nth-child(10) td,
      table tbody tr:nth-child(11) td,
      table tbody tr:nth-child(12) td
      {
        padding-top: 0;
        padding-bottom: 0;
      }
      .amount-in-words{
        border-bottom:3px solid black;
      }

      .table thead th {
    vertical-align: bottom;
    border-bottom: 4px solid black;
}

      /* .invoice-template{
        padding: 20px;
        border: 20px solid transparent;
        border-image: linear-gradient(to right,#633363 50%,#f3c53d 50%);
        border-image-slice: 1;
      } */

      .logo{
        margin-top: 2rem;
      }
      .logo2{
        margin-top: 2rem;
        height: 160px;
        width:200px;
      }

      .invoice-template{
        padding: 20px;
        background-image: url('https://dev-api.test.com/files/files/DumpData/Frame.png');
        background-repeat: no-repeat;
        background-size: contain;
        break-inside: auto;
      }

      .main-container{
        border: 1px solid black;
        padding: 20px 10px;
        background: white;
      }

      p {
        font-weight: 500;
      }


    </style>
  </head>
<body>
  <div class="container invoice-template">
    <!-- <div class="main-container"> -->
    <div class="row justify-content-center">
      <div class="col-md-5 logo"><img src={{ logo }} class="logo2"></div>
      <div class="col-md-5 text-right">
        <ul style="list-style: none; color: purple; margin-top: 2rem;">
            <li>{{ phone }}<span></span></li>
            <li><p>{{ email }}<br>{{ website }}</p><span></span></li>
          <li>Resource Factory Pvt. Ltd.<br>{{ shop_address|linebreaksbr }}<span></span></li>
          </ul>
      </div>
    </div>

    <div class="row text-center">
      <div class="col-md-12"><h6>INVOICE</h6></div>
    </div>

    <div class="row justify-content-center">
      <div class="col-md-5">
        <p>
          To,<br>
          {{ user_name }}<br>
          {{ user_address|linebreaksbr }}
        </p>
        <p>Client GST Number.:</p>
      </div>
      <div class="col-md-5 text-center">
        <p>Date: {{ order_date|date:"d-m-Y" }}</p>
        <p>Invoice No. {{ invoice }}</p>
      </div>
    </div>

я даю краткую версию html кода. если нужен полный код, пожалуйста, укажите.

Поведение декораций бокса при разделении бокса (как в вашем основном <div> здесь) контролируется box-decoration-break. По умолчанию используется slice, который разрывает границы после рендеринга. clone будет вычислять границы для каждой части бокса:

.invoice-template {
    box-decoration-break: clone;
}
Вернуться на верх