htmlcsspdf-generationweasyprintdjango-weasyprint
Fixed !
How to set a header in the same place across different pages by using WeasyPrint?
we are using WeasyPrint version: 53.4 & Python version: 3.9.1 to generate PDF from html template. But we are facing a problem in the running header alignment after the first page. It exactly same as the issue, and solution for that problem not working for us. I will update the sample code here :
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 and 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>Here the first page we are getting the header in the proper location but after that it's not as expected. We tried to update the CSS for the second page and so on , but it's not worked.
Page 1 & 2 :
Thanks !
Solution
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>- What is the difference between inline-block and inline-table?
- Array lists of HTML elements in order by website in selenium / beautiful soup
- EditorConfig extension for VS Code does nothing
- uploading HTML code to ebay store
- How to access all the direct children of a div in tailwindcss?
- How can I align a logo in the navbar header of an R shiny app created using bslib?
- Text to speech with avatar lip sync, no plug-ins
- ERR_CERT_REVOKED only on Smartphones (connection is not secure)
- IO Is Not Defined - Socket.io
- Is using <footer> inside <form> semantically fine?
- Embedding Reddit Post in Qualtrics Survey not working
- PHP Scrape html page content with tags
- Need to make a clickable <div> button
- What type of this element?
- Print and Print Preview of Web Page not Working Properly in Microsoft Edge Browser
- how can i get element height in javascript
- Scraping hierarchical website in a specific category
- Wrap <img> tag in a new tag and add alt attribute to the <img>
- Remove non-<img> tags from string
- regex for match all <img> tag and extract the "src" attribute
- Check for Table null in Jquery for JSON response
- jQuery how to add image from computer
- XPath for colspan attribute values as browser understands them?
- How to Ensure Each Table Column Occupies 25% Width and Allows Horizontal Scrolling in HTML/CSS?
- Get src value containing a specific keyword from all <img> tags
- How can I get a href,Image src,title from given html using DomDocument
- css animate from top to center
- How to Right-align flex item?
- How to add keydown listener to shadow dom
- Can a HTML telephone link accept spaces in the value?