0

我仍在使用 Django 和 wkhtml2pdf 学习，我需要一些帮助，我已经搜索并尝试了很多解决方案，但它们对我不起作用，我想在页脚中设置背景图像和页码（我已经使用 wkhtml2pdf 库):

这是代码

<!doctype html>
<html lang="en">
  <head>
    <style type="text/css">
      body{
      background-image: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEBLAEsAAD/...');
      margin:0px;
      background-size: cover;
      background-position: left top;
      padding-top:0px;
      height: 1100px; 
      width: 900px;     
      } 
      #divb
      {
        font-size: 12px; 
        font-family: Arial;
      }
      div.footer {
          display: block; text-align: center;
          position: running(footer);
      @page { 
          @bottom-center { content: element(footer) }
           }
      }
   </style>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 <body style="border:0; margin: 0;">
   <div id="divb">
      <p><strong>Materials :</strong> {{ materiel }}</p> 
.........(the rest of calling the data)
   </div>
   <div class='footer'>
      Page <span id='page'></span> of 
      <span id='topage'></span>   
      <script> 
        var vars={};
        var x=window.location.search.substring(1).split('&');
        for (var i in x) {
          var z=x[i].split('=',2);
          vars[z[0]] = unescape(z[1]);
        }
        document.getElementById('page').innerHTML = vars.page; 
        document.getElementById('topage').innerHTML = vars.topage; 
      </script> 
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
  <script>
      window.load = function() {
        window.status = 'render-pdf';
      };
  </script>
 </body>
</html>

这是结果：

那是一个white space between the background image and the origin page，也是我出现的页数（未定义的页面未定义），我如何正确调整背景图像以填写所有没有空白的页面，页脚中的页码也有什么问题。

请看截图。

在此处输入图像描述

.在此先感谢大家。

4

0 回答 0