0

Am still learning on Django and wkhtml2pdf using and I need some help please, I have searched and try much solutions but they don't work with me, I want to set a background image and page number in the footer(I Have use wkhtml2pdf library):

Here it's the code

<!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>

and here it's the result :

the was a white space between the background image and the origin page , also the number of page appear to me (Page undefined of undefined), How i can adjust the background-image correctly to filled out all the page without white space , also what' wrong with page number in the footer.

see the screenshoot please.

enter image description here

.Thanks In Advance for everyone here.

Helena Perroni
  • 63
  • 10
  • I have tried that( – Helena Perroni Feb 17 '22 at 11:51
  • I have try it now with fllowing this solution, i use linux , I have typed "wkhtmltopdf -s Letter -B 0 -T 0 -L 0 -R 0 generate_pdf.html Document_calculator.pdf" (Here the generate_pdf.html the template that i have develop it to render it to pdf , and Document_calculator.pdf is the the name of pdf that i have define it in the views.py to render it.) – Helena Perroni Feb 17 '22 at 15:19
  • it returns this error : Loading pages (1/6) Error: Failed to load http://generate_pdf.html/, with network status code 3 and http status code 0 - Host generate_pdf.html not found Error: Failed loading page http://generate_pdf.html (sometimes it will work just to ignore this error with --load-error-handling ignore) Exit with code 1 due to network error: HostNotFoundError – Helena Perroni Feb 17 '22 at 15:19

0 Answers0