Sandip Agarwal

A4 Print Layout with Header, Footer, and No Page Breaks

<!DOCTYPE-html>-<html-lang="en">-<head>-<meta-charset="UTF-8">-<meta-name="viewport"-content="width=device-width,-initial-scale=1.0">-<meta-http-equiv="X-UA-Compatible"-content="IE=edge">-<title>A4-Print-Layout-with-Header/Footer-and-No-Page-Breaks</title>-<style>-/*-General-A4-page-settings-with-reduced-margin-*/-/*-General-A4-page-settings-with-reduced-margin-*/-@page-{-size:-A4;-/*-Ensure-A4-page-size-*/-margin:-5mm;-/*-5mm-margin-on-all-sides-*/-}-body-{-margin:-0;-padding:-0;-}-/*-Header-and-Footer-*/-header,-footer-{-position:-fixed;-width:-100%;-left:-0;-right:-0;-height:-100px;-/*-Reduce-height-for-header/footer-*/-display:-block;-}-header-{-top:-0;-}-footer-{-bottom:-0;-}-header-img,-footer-img-{-width:-100%;-height:-auto;-}-/*-Content-Section-*/-.content-{-margin-top:-130px;-/*-Adjust-to-fit-below-header-*/-margin-bottom:100px;-/*-Adjust-to-fit-above-footer-*/-font-size:-12px;-/*-Smaller-font-for-compact-layout-*/-}-/*-Table-styles-*/-table-{-width:-100%;-border-collapse:-collapse;-margin-top:-5px;-font-size:-11px;-/*-Smaller-table-font-*/-}-th,-td-{-padding:-1px-2px;-/*-Compact-padding-for-table-rows-*/-text-align:-center;-vertical-align:-middle;-border:-1px-solid-black;-line-height:-1;-/*-Compact-line-height-*/-border-left:-1px-solid-black;-border-right:-1px-solid-black;-border-top:-none;-border-bottom:-none;-}-tr:last-child-td-{-border-bottom:-1px-solid-black;-}-th-{-background-color:-#f2f2f2;-font-weight:-bold;-}-/*-Ensures-table-headers-repeat-on-each-page-*/-thead-{-display:-table-header-group;-}-/*-Makes-sure-that-rows-do-not-break-within-a-page-*/-tr-{-page-break-inside:-avoid;-}-/*-Page-break-handling-*/-@media-print-{-header-{-position:-fixed;-top:-0;-}-.content-{-margin-top:-150px;-/*-Ensure-consistent-margin-below-header-*/-margin-bottom:-60px;-/*-Prevent-overlap-with-footer-*/-}-table,-tr,-td,-th-{-page-break-inside:-avoid;-page-break-after:-auto;-}-}-/*-Terms-and-Conditions-Section-*/-.terms-section-{-margin-top:-5px;-font-size:-10px;-/*-Smaller-font-for-compact-layout-*/-padding-top:-5px;-text-align:-left;-}-.terms-section-b-{-font-size:-12px;-}-/*-Padding-for-address-section-*/-.address-section-{-padding:-5px;-/*-Reduced-padding-for-address-section-*/-}-</style>-</head>-<body>-<header>-<img-src="/files/trimax_header.jpg"-alt="Header-Image">-</header>-<div-class="content">--<table-style="margin:0--2mm;width:-102%;"->--<tr-style="border:-none;">-<td-colspan="40"-style="text-align:-left;-width:-30%;-border:-none;">-</td>-<td-colspan="10"-style="text-align:-right;-width:-30%;-border:-none;font-size:-14px;line-height:-1.3;-">-<strong-style="font-size:-30px;">Invoice-Cum-Packing-List</strong><br><br>-</td>-</tr>-<tr-style="border:-none;">-<td-colspan="45"-style="text-align:-left;-width:-30%;-border:-none;">-<p-style="margin:-0;-margin-bottom:-5px;line-height:-1.3;font-size:-14px;">-<strong>{{-doc.company-}}</strong><br>-{{-doc.get_formatted("company_address_display")-}}-<strong>TRN:</strong>-{{-doc.company_trn-}}-</p>-</td>-<td-colspan="4"-style="text-align:-right;-width:-30%;-border:-none;font-size:-14px;line-height:-1.3;-">-<strong>Date:</strong>-{{-frappe.utils.formatdate(doc.posting_date,-"dd-MM-yyyy")-}}<br>-<strong>INV#:</strong>-{{-doc.name-}}<br><br>-</td>-</tr>-<tr-style="border:-none;">--<td-colspan="45"-style="padding:-5px;-text-align:-left;-width:-50%;-border-right:-none;-border:-none;">-<p-style="margin:-0;-margin-bottom:-5px;-line-height:-1.3;font-size:-14px;">-<span><b>CUSTOMER</b><br></span>-<span>{{-doc.get_formatted("customer")-}}</span><br>-<span>{{-doc.get_formatted("address_display")-}}</span>-{%-if-doc.tax_id-%}-<strong>TRN:</strong>-{{-doc.tax_id-}}-{%-endif-%}-</p>-</td>-{%-if-doc.shipping_address-%}-<td-colspan="45"-style="padding-left:-10px;-padding-right:-10px;-margin:-0;-text-align:-right;-word-wrap:-break-word;-white-space:-normal;-width:-50%;-border:-none;font-size:-14px;line-height:-1.3;">-<span><b>SHIP-TO</b><br></span>-<span>{{-doc.get_formatted("shipping_address_name")-}}</span><br>-<span>{{-doc.get_formatted("shipping_address")-}}</span>-</td>-{%-endif-%}-</tr>-</table>--<table-class="detail"-style="width:-100%;-border-collapse:-collapse;-border:-1px-solid-black;">-<thead-style="border:-1px-solid-black;">-<tr>-<th-style="font-weight:-bold;font-size:-12;color:-black;">Sl#</th>--<th-style="font-weight:-bold;font-size:-12;color:-black;">Item-Description</th>-<th-style="font-weight:-bold;font-size:-12;color:-black;">Qty</th>-<th-style="font-weight:-bold;font-size:-12;color:-black;">Rate</th>-<th-style="font-weight:-bold;font-size:-12;color:-black;">HS-Code</th>-<th-style="font-weight:-bold;font-size:-12;color:-black;">COO</th>-<th-style="font-weight:-bold;font-size:-12;color:-black;">VAT</th>-<th-style="font-weight:-bold;font-size:-12;color:-black;">Total</th>-</tr>-</thead>-<tbody-style="height:-90%;">-{%-set-count-=-namespace(value=0)-%}-{%-if-doc.items|length-==-0-%}-<tr-style="height:-90%;-vertical-align:-middle;">-<td-colspan="7"-style="text-align:-center;-vertical-align:-middle;-border-left:-1px-solid-black;-border-right:-1px-solid-black;-border-top:-none;-border-bottom:-none;-height:-100%;">No-items-available</td>-</tr>-{%-else-%}-{%-for-item-in-doc.items-%}-{%-set-count.value-=-count.value-+-1-%}-<tr>-<td>{{-loop.index-}}</td>--<td>{{-item.item_code-}}---{{-item.item_name-}}</td>-<td-style="white-space:-nowrap;">{{-item.qty-}}-{{-item.uom-}}</td>-<td>{{-item.rate-}}</td>-<td>{{-item.tax_code-or-'N/A'-}}</td>-<td>{{-frappe.db.get_value("Item",-item.item_code,-"country_of_origin")-}}</td>-<td>{{-(item.item_tax_template-or-'0%').split('%')[0].split()[-1]-}}%</td>-<td-style="text-align:-right;white-space:-nowrap;">{{-doc.currency-}}-{{-frappe.utils.fmt_money(item.net_amount)-}}</td>-</tr>-{#-Add-page-break-after-the-first-10-rows-with-a-bottom-border-#}-{%-if-loop.index-==-10-%}-<tr-style="page-break-after:-always;-border-bottom:-2px-solid-black;"></tr>-{%-endif-%}-{#-Add-page-break-after-every-20-rows-after-the-first-10,-with-a-bottom-border-#}-{%-if-loop.index->-10-and-(loop.index---10)-%-20-==-0-%}-<tr-style="page-break-after:-always;-border-bottom:-2px-solid-black;"></tr>-{%-endif-%}-{%-endfor-%}-{%-endif-%}-</tbody>-<tfoot>-<tr-style="font-weight:-bold;-background-color:-#f1f1f1;">-<td-colspan="5"-style="padding:-2px;-text-align:-left;-vertical-align:-top;-line-height:-1.1;-font-size:-10px;-background-color:-#f1f1f1;">--<p-style="margin:-0;-padding:-0;">-{{-doc.in_words-}}-</p>-</td>-<td-colspan="2"-style="padding:-2px;-text-align:-right;-vertical-align:-top;-line-height:-1.1;-font-size:-10px;">-<div-style="margin:-0;-padding:-0;">-<span-style="display:-block;">Amount</span>-{%-if-doc.total_taxes_and_charges->-0-%}-<span-style="display:-block;">VAT</span>-{%-endif-%}-<span-style="display:-block;">Grand-Total</span>-</div>-</td>-<td-colspan="2"-style="padding:-2px;-text-align:-right;-vertical-align:-top;-line-height:-1.1;-font-size:-10px;white-space:-nowrap;">-<div-style="margin:-0;-padding:-0;">-<span-style="display:-block;">-{{-doc.currency-}}-{{-frappe.utils.fmt_money(doc.total)-}}-</span>-{%-if-doc.total_taxes_and_charges->-0-%}-<span-style="display:-block;">-{{-doc.currency-}}-{{-frappe.utils.fmt_money(doc.total_taxes_and_charges)-}}-</span>-{%-endif-%}-<span-style="display:-block;">-{{-doc.currency-}}-{{-frappe.utils.fmt_money(doc.rounded_total)-}}-</span>-</div>-</td>-</tr>-</tfoot>-</table>---{%--set-items_by_tax_code-=-doc.items-|-groupby('tax_code')--%}-{%--set-grand_total_qty-=-[]--%}-{%--set-grand_total_weight-=-[]--%}-{%--set-grand_total_cbm-=-[]--%}-<table-class="detail"-style="width:-100%;-border-collapse:-collapse;-border:-1px-solid-black;">-<thead-style="border:-1px-solid-black;">-<tr>-<th-style="font-weight:-bold;font-size:-12;color:-black;">HS-Code</th>-<th-style="font-weight:-bold;font-size:-12;color:-black;">Quantity</th>-<th-style="font-weight:-bold;font-size:-12;color:-black;">Weight</th>-<th-style="font-weight:-bold;font-size:-12;color:-black;">CBM</th>-</tr>-</thead>-<tbody>-{%--for-tax_code,-items-in-items_by_tax_code--%}-{%--set-total_qty-=-[]--%}-{%--set-total_weight-=-[]--%}-{%--set-total_cbm-=-[]--%}-{#-Iterate-through-items-in-the-Tax-Code-group-#}-{%--for-item-in-items--%}-{#-Append-quantity,-cbm-and-weight-to-lists-for-calculation-#}-{%--set-_-=-total_qty.append(item.qty)--%}-{%--set-_-=-total_weight.append(item.weight_per_unit-*-item.qty)--%}-{%--set-_-=-total_cbm.append(item.cbm-*-item.qty)--%}-{%--set-_-=-grand_total_qty.append(item.qty)--%}-{%--set-_-=-grand_total_weight.append(item.weight_per_unit-*-item.qty)--%}-{%--set-_-=-grand_total_cbm.append(item.cbm-*-item.qty)--%}-{%--endfor--%}-{#-Calculate-sum-of-the-lists-#}-{%--set-qty_sum-=-total_qty-|-sum--%}-{%--set-weight_sum-=-total_weight-|-sum--%}-{%--set-cbm_sum-=-total_cbm-|-sum--%}-<tr>-<td>{{-tax_code-if-tax_code-else-"No-Tax-Code"-}}</td>-<td>{{-qty_sum-}}</td>-<td>{{-weight_sum-|-round(5)-}}-{{-items[0].weight_uom-}}</td>-<td>{{-cbm_sum-|-round(5)-}}</td>-</tr>-{%--endfor--%}-</tbody>-<tfoot>-{#-Final-Row-for-Grand-Total-#}-{#-Calculate-sum-of-the-lists-#}-{%--set-grand_qty_sum-=-grand_total_qty-|-sum--%}-{%--set-grand_weight_sum-=-grand_total_weight-|-sum--%}-{%--set-grand_cbm_sum-=-grand_total_cbm-|-sum--%}-<tr-style="font-weight:-bold;-background-color:-#f1f1f1;font-size:-10;color:-black;line-height:-1.1;">-<td>-TOTAL-</td>-<td>-{{-grand_qty_sum-}}-</td>-<td>-{{-grand_weight_sum-|-round(5)-}}-</td>-<td>-{{-grand_cbm_sum-|-round(5)-}}-</td>-</tr>-</tfoot>-</table>--<div-class="terms-section">-{%-if-doc.terms-%}-<b>Terms-&-Conditions</b>-<br>-{{doc.terms}}-{%-endif%}-</div>-</div>-<footer>-<img-src="/files/trimax_footer.png"-alt="Footer-Image">-</footer>-</body>-</html>---Modify-the-html-code-so-that-the-header-prints-only-at-the-beginning-of-first-page-and-footer-prints-only-at-the-end-of-last-page

Prompt

About

Create professional A4 print layouts with fixed header and footer using React and Tailwind CSS. Ensure consistent print formatting with no page breaks.

A4 Print Layout with Header, Footer, and No Page Breaks

About

Tags

Share