Here is the reference image with space below I am using Playwright to convert the (jinja template) HTML file to pdf, where I have to fix the issue that if the content is less than one page, I have to add that extra row of the remaining height. Still, I am getting an issue: it always leaves some space below even after calculating the remaining height. As we can see after the bank details section below it leaves a blank space. I am adding js to calculate the remaining height
let pageHeight = document.body.getBoundingClientRect().height;
let contentHeight = document
.querySelector(".main-table")
.getBoundingClientRect().height;
let remainingHeight = Math.round(pageHeight - contentHeight);
if (contentHeight < pageHeight) {
addHeightRow(remainingHeight, "Remaining");
document.querySelector(".section-6").style.borderBottom = "none";
}
function addHeightRow(height, label) {
const lineItems = document.querySelectorAll(".line-item");
lineItems.forEach((lineItem, index) => {
if (index === lineItems.length - 1) {
lineItem.insertAdjacentHTML(
"afterend",
`
<tr class="remaining-height-row" style="height: ${height}px;">
<td class="border-right border-bottom sr-no text-center"></td>
<td class="border-right border-bottom des-of-goods"></td>
<td class="border-right border-bottom qty right">${height}</td>
<td class="border-right border-bottom unit right"></td>
<td class="border-right border-bottom rate right"></td>
<td class="border-right border-bottom discount right"></td>
<td class="border-right border-bottom discount-amt right"></td>
<td class="border-bottom tax-amt right"></td>
</tr>
`
);
}
});
}
i have tried calculating it in the python file too but still got nothing
from jinja2 import Template
from playwright.sync_api import sync_playwright
def create_playwright_invoice_pdf(html_content, pdf_path, data: dict):
with sync_playwright() as p:
browser = p.chromium.launch()
page = browser.new_page()
# page.set_content(html_content)
page.set_content(html_content, wait_until='networkidle')
page.evaluate("""
() => {
function setEqualRowHeights() {
const taxTable = document.querySelector(
".section-4-wrapper .tax-table table"
);
const allTotalSect = document.querySelector(
".section-4-wrapper .all-total-count"
);
const allTotalSectTotalInfo = document.querySelector(
".section-4-wrapper .all-total-count .total-info"
);
const rows = document.querySelectorAll(
".line-item-table tbody tr.line-item"
);
const section = document.querySelector(".section-4");
const taxTableHeight = taxTable.getBoundingClientRect().height;
const allTotalSectTotalInfoHeight =
allTotalSectTotalInfo.getBoundingClientRect().height;
if (taxTableHeight > allTotalSectTotalInfoHeight) {
taxTable.style.borderBottom = "1px solid black";
allTotalSect.style.borderBottom = "1px solid black";
} else {
section.style.borderBottom = "1px solid black";
}
let pageHeight = document.body.getBoundingClientRect().height;
let contentHeight = document
.querySelector(".main-table")
.getBoundingClientRect().height;
const section1 = document
.querySelector(".section-1")
.getBoundingClientRect().height;
const section2 = document
.querySelector(".section-2")
.getBoundingClientRect().height;
const section3 = document
.querySelector(".section-3")
.getBoundingClientRect().height;
const section4 = document
.querySelector(".section-4")
.getBoundingClientRect().height;
const section5 = document
.querySelector(".section-5")
.getBoundingClientRect().height;
const section6 = document
.querySelector(".section-6")
.getBoundingClientRect().height;
const tableHeadingHeight = document
.querySelector(".table-heading")
.getBoundingClientRect().height;
const lineItemTotal = document
.querySelector(".line-item-total")
.getBoundingClientRect().height;
const lineItems = document.querySelectorAll(".line-item");
const totalSection3Height =
section1 + section2 + section3 - lineItemTotal;
const totalLastSectionHeight =
section4 + section5 + section6 + lineItemTotal;
let remainingHeight = Math.round(pageHeight - contentHeight);
if (contentHeight < pageHeight) {
addHeightRow(remainingHeight, "Remaining");
}
return remainingHeight;
}
function addHeightRow(height, label) {
const lineItems = document.querySelectorAll(".line-item");
lineItems.forEach((lineItem, index) => {
if (index === lineItems.length - 1) {
lineItem.insertAdjacentHTML(
"afterend",
`
<tr class="remaining-height-row" style="height: ${height}px;">
<td class="border-right border-bottom sr-no text-center"></td>
<td class="border-right border-bottom des-of-goods"></td>
<td class="border-right border-bottom qty right">${height}</td>
<td class="border-right border-bottom unit right"></td>
<td class="border-right border-bottom rate right"></td>
<td class="border-right border-bottom discount right"></td>
<td class="border-right border-bottom discount-amt right"></td>
<td class="border-bottom tax-amt right"></td>
</tr>
`
);
}
});
}
return setEqualRowHeights();
}
""")
header_template = """
<style>
header {
width: 100%;
font-size: 10px;
font-family: "Times New Roman", sans-serif;
margin: 0 1cm 10px 1cm;
box-sizing: border-box;
}
.date {
text-align: right;
width: 100%;
}
</style>
<header>
<div class="date"></div>
</header>
"""
footer_template = """
<style>
.footer {
font-size: 10px;
text-align: center;
width: 100%;
margin: 0 1cm 0 1cm;
font-family: "Times New Roman", sans-serif;
}
.footer-content {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 100%;
}
.fw-bold {
font-weight: bold;
}
</style>
<div class="footer">
<div class="footer-content">
<p class="fw-bold">Powered By TECHstile.in</p>
<p>This is a Computer Generated Invoice</p>
<p>{{invoice_number}}-
<strong><span class="pageNumber"></span>/<span class="totalPages"></span></strong>
</p>
</div>
</div>
"""
template = Template(footer_template)
rendered_footer = template.render(invoice_number=data['invoice_number'])
page.pdf(path=pdf_path, prefer_css_page_size=False,
format='A4',
margin={'top': '1cm', 'right': '1cm', 'bottom': '1.2cm', 'left': '1cm'},
display_header_footer=True,
header_template=header_template,
footer_template=rendered_footer)
browser.close()