I'm facing an issue in ERPNext when generating PDFs from the Sales Invoice print screen. There are two options for PDF generation:
- Print → Save as PDF (Works perfectly, maintains layout and everything)
- Direct PDF Button (Breaks layout: font size, margins, and page size change)
I tried modifying the Print Settings CSS, which affects both methods. While some changes reflect, it also disrupts the "Print → Save as PDF" output.
I've searched and found similar issues, but the solutions are not working in my case as maybe it's outdated or I've different version of Erpnext/Frappe/wkhtmltopdf etc.
What I've Found:
- Wkhtmltopdf rendering without CSS - custom and core - all standard solutions have no affect - ubuntu 18.04
- Generated PDF looks weird, wkhtmltopdf, no bootstrap CSS
- WKHTMLTOPDF not loading local css
- WkHTMLtoPDF not loading local CSS and images
What I've Tried, Resolved:
- Adjusting CSS in Print Settings
- Ensuring
wkhtmltopdfis correctly installed (using the Qt-patched version 0.12.6) - Added "host_name": "example", in sitename/site_config.json and ran command
bench migrate - In my case, pictures (QR, Header, Footer) are displayed, so no issue with paths
Questions:
- How can I apply styles specifically to the PDF button output without affecting Print → Save as PDF?
- Any ERPNext configuration changes needed to standardize both outputs?
I've attached both screenshots:
You'll notice the difference of Font Size, Font Family, Overlapping of texts, Page Size etc.
I've also attached the Print Format to understand the css applied.
[details="Print Format"]
<style>
.print-format table,
.print-format tr,
.print-format td {
font-family: serif;
line-height: 0.3 !important;
vertical-align: middle;
direction: rtl !important;
}
@media print {
body {
font-family: 'Cairo';
width: 220mm;
height: 297mm;
margin: 5mm 5mm 10mm 5mm;
footer {
page-break-after: always;
}
/* change the margins as you want them to be. */
}
}
@media screen {
.print-format {
width: 200mm;
padding: 5mm;
min-height: 297mm;
footer {
page-break-after: always;
}
}
}
table {
width: 100%;
white-space: nowrap;
}
th {
font-size: 10px;
color: black;
}
body:last-child .print-format td img {
width: 60% !important;
}
.ql-editor read-mode {
line-height: 1 !important;
}
.ql-editor p, .ql-editor h1, .ql-editor h2, .ql-editor h3, .ql-editor h4, .ql-editor h5, .ql-editor h6, .ql-editor span {
counter-reset: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
line-height: 1.2;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
display: inline-flex !important;
}
.print-format p {
margin: 3px 0px 3px;
display: inline-block !important;
}
.si {
color: darkblue !important;
margin-top: -5px !important;
}
.w1 {}
.w2 {
border-top: 3px solid #d1d8dd !important;
padding-top: 4px !important;
text-align: center;
direction: rtl;
margin-top: 15px;
}
@media print {
div.print-footer {
display:block !important;
position: fixed !important;
bottom: 0;
width: 97%;
background-color: white;
text-align: center;
padding: 2mm 2;
box-sizing: border-box;
page-break-after: always;
z-index: 9999;
}
div.print-footer .page-number {
position: absolute;
bottom: 5mm;
width: 100%;
text-align: center;
}
@page :first {
table:nth-of-type(4) tr:nth-child(n+10) {
page-break-after: always;
}
}
@page {
table tr:nth-child(28n+1) {
page-break-after: always;
}
}
}
* {
box-sizing: content-box !important;
}
body {
counter-reset: page;
}
/* Define a style for the page number */
.page-number:before {
counter-increment: page;
content: counter(page) " of "counter(pages);
}
</style>
<script>
window.onload = function() {
function insertPageBreaks(tableSelector, firstPageRows, nextPageRows) {
var tables = document.querySelectorAll(tableSelector);
tables.forEach(function(table) {
var rows = table.querySelectorAll('tr');
var rowCount = rows.length;
var currentPage = 1;
var rowsPerPage = currentPage === 1 ? firstPageRows : nextPageRows;
for (var i = rowsPerPage; i < rowCount; i += rowsPerPage) {
var pageBreakRow = document.createElement('tr');
pageBreakRow.className = 'page-break';
rows[i - 1].parentNode.insertBefore(pageBreakRow, rows[i]);
currentPage++;
rowsPerPage = nextPageRows;
}
});
}
insertPageBreaks('table:nth-of-type(4)', 23, 41);
insertPageBreaks('table:nth-of-type(n+5)', 41, 41);
};
</script>
<body>
<table style="white-space: nowrap;margin-top:-4% !important;">
<tr>
<td style="width:50%;">
<!-- Table2 -->
<table style="white-space: nowrap;line-height: 1.3 !important;">
<tr style="line-height: 1.3 !important;">
<td style="width:30%;font-size: 10px;text-align: center;">
<span style="color: #5b5b5b;font-size: 25px;font-weight: 800;text-align: center;line-height: 1;">
<br> {{ "TAX INVOICE" }}
<br> {{ "فاتورة ضريبية " }}
</span>
</td>
</tr>
</table>
</td>
<td style="width:10%;">
<!-- Table1 -->
<table>
<tr>
<td>
<div style="width: 200px !important;text-align: center; display: block !important;margin: 0 149px 0 -13px!important;vertical-align: middle !important;margin-top: 0px !important;">
{{ letter_head }}</div>
</td>
</tr>
</table>
</table>
<table style="white-space: nowrap;table-layout: fixed;">
<tr>
<td style="width:50%;">
<!-- Table1 -->
<table style="white-space: nowrap;table-layout: fixed;">
<tr>
<td>
<div style="width: 200px !important;text-align: center; display: block !important;margin: 0 auto !important;vertical-align: middle !important;margin-top: -25px !important;">
<img class="qr-code" src={{doc.ksa_einv_qr}}>
</div>
</td>
</tr>
</table>
</td>
<td style="width:50%; border: solid 2px gray; ">
<!-- Table2 -->
<table style="white-space: nowrap;table-layout: fixed;line-height: 1.3 !important;">
<tr style="line-height: 1.3 !important;">
<td style="width:30%;font-size: 10px;text-align: left;line-height: 1.3 !important;">
<b>{{ "رقم الفاتورة" }} :</b>
<br>
<b>{{ "تاريخ الفاتورة" }} :</b>
<br>
<b>{{ "رقم العقد " }} :</b>
<br>
<b>{{ "رقم أمر الشراء/الخدمة " }} :</b>
<br>
<b>{{ " تاريخ التوريد/الإنجاز " }} :</b>
<br>
<b>{{ "الرقم المرجعي " }} :</b>
<br>
<b>{{ "رمز البائع " }} :</b>
<br>
</td>
<td style="width:40%;font-size: 10px;text-align: center;line-height: 1.3 !important;">
<b style="color: darkblue;">{{ doc.name }}</b>
<br>
<b style="color: darkblue;"> {{ doc.get_formatted("posting_date") }}</b>
<br>
<b style="color: darkblue;">{{ doc.custom_contract_number or "" }}</b>
<br>
<b style="color: darkblue;">{{ doc.po_no or "" }}</b>
<br>
<b style="color: darkblue;">{{ doc.delivery_date_and_time or "" }}</b>
<br>
<b style="color: darkblue;">{{ doc.custom_rfx_number or "" }}</b>
<br>
<b style="color: darkblue;">{{ doc.custom_vendor_no or "" }}</b>
<br>
</td>
<td style="width:35%;font-size: 10px;text-align: right;line-height: 1.3 !important;">
<b>:{{ "Invoice No" }}</b>
<br>
<b>:{{ "Invoice Date" }}</b>
<br>
<b>:{{ "Contract Number" }}</b>
<br>
<b>:{{ "Order/Service No" }}</b>
<br>
<b>:{{ "Complet/Delivery Date" }}</b>
<br>
<b>:{{ " P.T.Ref" }}</b>
<br>
<b>:{{"Vender No " }}</b>
<br>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table style="white-space:nowrap; table-layout:fixed; margin-top:5px; width:100%; text-align:center;">
<tr>
<td style="width:50%; border:2px solid gray;">
<!-- Table1 -->
<table style="white-space: nowrap; table-layout: fixed; margin-top: -6px; width:100%;">
<tr style="border-bottom: 2px solid black;">
<td style="width:35%; font-size:16px; font-weight:900; text-align:right;"></td>
<td style="width:80%; font-size:12px; font-weight:900; text-align:center;">
<b> {{ " Supplier " }}</b>
<br>
<br>
<br>
<br>
<b> {{ " المورد" }} </b>
</td>
<td style="width:35%; font-size:16px; font-weight:900; text-align:left;"></td>
</tr>
<tr style="border-bottom:1px solid black;">
<td colspan="3" style="font-size:10px; text-align:center;">
<b style="color: darkblue;">{{ "شركة الرواد الفنية للتجارة والمقاولات العامه المحدوده" }}</b>
<br>
<br>
<br>
<br>
<b style="color: darkblue;">{{ "Trading & General Contracting Co. Ltd" }}</b>
</td>
</tr>
<tr style="border-bottom: 1px solid black;">
<td style="width:30%; font-size:10px; text-align:right;">
<b>{{ "الرقم الضريبي" }}:</b>
</td>
<td style="width:40%; font-size:10px; text-align:center; color:darkblue;">
<b>{{ docpany_tax_id }}</b>
</td>
<td style="width:30%; font-size:10px; text-align:left;">
<b>:{{ "VAT ID" }}</b>
</td>
</tr>
<tr style="border-bottom: 1px solid black;">
<td style="width:25% !important; font-size:10px; text-align:center;">
<div style="font-weight:900; padding: 5px; border-bottom: 1px solid black;">
ترخيص الموارد البشرية
</div>
<div style="padding: 5px;">
85953
</div>
</td>
<td style="width:25% !important; font-size:10px; text-align:center;">
<div style="font-weight:900; padding: 5px; border-bottom: 1px solid black;">
السجل التجاري (CR)
</div>
<div style="padding: 5px;">
4030138666
</div>
</td>
<td style="width:25% !important; font-size:10px; text-align:center;">
<div style="font-weight:900; padding: 5px; border-bottom: 1px solid black;">
التامينات الاجتماعية
</div>
<div style="padding: 5px;">
511414695
</div>
</td>
</tr>
<tr>
<td style="width:30%; font-size:10px; text-align:right; height:75px;">
<b>{{ "العنوان" }}:</b>
</td>
<td style="width:40%; font-size:10px; text-align:center; height:75px; line-height:1 !important; color:darkblue;">
<b style="white-space: normal !important;color: darkblue !important;"> {{ frappe.db.get_value("Address", docpany_address, "address_line1") or "" }}
<br>
<br> {{ frappe.db.get_value("Address", docpany_address, "address_in_arabic") or "" }}
</b>
</td>
<td style="width:30%; font-size:10px; text-align:left; height:75px;">
<b>:{{ "Address" }}</b>
</td>
</tr>
</table>
</td>
<td style="width:50%; border:2px solid gray;">
<!-- Table2 -->
<table style="white-space:nowrap; table-layout:fixed; margin-top:-6px; width:100%;">
<tr style="border-bottom: 2px solid black;">
<td style="width:35%; font-size:16px; font-weight:900; text-align:right;"></td>
<td style="width:80%; font-size:12px; font-weight:900; text-align:center;">
<b> {{ " Customer " }}</b>
<br>
<br>
<br>
<br>
<b> {{ " العميل" }} </b>
</td>
<td style="width:35%; font-size:16px; font-weight:900; text-align:left;"></td>
</tr>
<tr style="border-bottom:1px solid black;">
<td colspan="3" style="font-size:10px; text-align:center;">
<b style="color: darkblue;">{{ doc.customer_name_in_arabic or "" }} </b>
<br>
<br>
<br>
<br>
<b style="color: darkblue;">{{ doc.customer_name }} </b>
</td>
</tr>
<tr style="border-bottom:1px solid black;">
<td style="width:30%; font-size:10px; text-align:right;">
<b>{{ "الرقم الضريبي" }}:</b>
</td>
<td style="width:40%; font-size:10px; text-align:center; color:darkblue;">
<b>{{ doc.tax_id or "" }}</b>
</td>
<td style="width:30%; font-size:10px; text-align:left;">
<b>:{{ "VAT ID" }}</b>
</td>
</tr>
<tr style="border-bottom:1px solid black;">
<td style="width:30%; font-size:10px; text-align:right;">
<b>{{ "رقم السجل التجاري"}}:</b>
</td>
<td style="width:40%; font-size:10px; text-align:center; color:darkblue;">
<b>{{ frappe.get_doc("Customer", doc.customer).custom_company_cr or ""}} </b>
</td>
<td style="width:30%; font-size:10px; text-align:left;">
<b>:{{ "CR NO" }}</b>
</td>
</tr>
<tr>
<td style="width:30%; font-size:10px; text-align:right; height:75px;">
<b>{{ "العنوان" }}:</b>
</td>
<td style="width:40%; font-size:10px; text-align:center; height:75px; line-height:1 !important; color:darkblue;">
<b style="white-space: normal !important;color: darkblue !important;"> {{ frappe.db.get_value("Address", doc.customer_address, "address_line1") or "" }}
<br>
<br> {{ frappe.db.get_value("Address", doc.customer_address, "address_in_arabic") or "" }}
</b>
</td>
<td style="width:30%; font-size:10px; text-align:left; height:75px;">
<b>:{{ "Address" }}</b>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--Dynamic Colspan for total row columns-->
{% set col = namespace(one = 2, two = 1) %} {% set length = doc.taxes | length %} {% set length = length / 2 | round %} {% set col.one = col.one + length %} {% set col.two = col.two + length %} {%- if(doc.taxes | length % 2 > 0 ) -%} {% set col.two =
col.two + 1 %} {% endif %}
<!-- Items -->
{% set total = namespace(amount = 0) %}
<table style="margin-top: 15px;direction: ltr !important;white-space:nowrap; table-layout:fixed;">
<thead>
<tr style="border-bottom: solid 2px black;border-top: solid 2px black;line-height: 2 !important;">
<th colspan="1" style="width:3%;text-align:center;color:black;font-size:12px;font-weight: 600;">S
<br>م </th>
<th colspan="3" style="width:57%;text-align:center;color:black;font-size:12px;font-weight: 600;">Description
<br>وصف المنتج </th>
<th colspan="1" style="width:5%;text-align:center;color:black;font-size:12px;font-weight: 600;">QTY
<br>الكمية </th>
<th style="width:10%;text-align:left;color:black;font-size:12px;font-weight: 600;">Unit Price
<br>سعر الوحدة </th>
<th style="width:15%;text-align:left;color:black;font-size:12px;font-weight: 600;">Taxable Amount
<br />الاجمالي قبل الضريبة </th> {% for row in doc.taxes %}
<th style="width:15%;text-align:center;color:black;font-size:12px;font-weight: 600;">Tax Percentage
<br>نسبة الضريبة </th>
<th style="width:10%;text-align:center;color:black;font-size:12px;font-weight: 600;">Tax Amount
<br>مبلغ الضريبة </th> {% endfor %}
<th style="width:15%;text-align:center;color:black;font-size:12px;font-weight: 600;">Total With VAT
<br>المجموع بالضريبة </th>
</tr>
</thead>
<tbody>
{%- for item in doc.items -%} {% set total.amount = item.amount %}
<tr style="margin-bottom: -10px !important;line-height:0.1 !important; height: 20px !important;">
<td colspan="1" style="width: 2%;text-align: center;">{{ item.idx }}</td>
<td colspan="3" style="width: 40%;text-align: left;line-height:0.3!important;font-size: 11px;font-weight: 700;">{{ item.item_code }}</td>
<td colspan="1" style="text-align: center;font-size: 12px;font-weight: 700;">{{ item.qty }}</td>
<td style="text-align: left;font-size: 12px;font-weight: 700;">{{ item.get_formatted("rate") }}</td>
<td style="text-align: left;font-size: 12px;font-weight: 700;">{{ item.get_formatted("amount") }}</td>
{% for row in doc.taxes %} {% set data_object = json.loads(row.item_wise_tax_detail) %} {% set key = item.item_code or item.item_name %} {% set taxable_amount = item.amount %} {% set tax_percentage = data_object[key][0] or 0 %} {% set tax_amount = taxable_amount
* (tax_percentage / 100) %} {% set total.amount = total.amount + tax_amount %}
<td style="text-align: center;font-size: 12px;font-weight: 700;">
<div class="qr-flex"> {%- if data_object[key][0] -%} <span>{{ frappe.format(data_object[key][0], {'fieldtype': 'Percent'}) }}</span> {%- endif -%} </div>
</td>
<td style="text-align: center;font-size: 12px;font-weight: 700;">
<span> {% if data_object[key][0] %} {{ frappe.format_value(tax_amount, currency=doc.currency) }} {% endif %} </span>
</td> {% endfor %}
<td style="text-align: center;font-size: 12px;font-weight: 700;"> {{ frappe.format_value(frappe.utils.flt(total.amount, doc.precision('total_taxes_and_charges')), currency=doc.currency) }} </td>
</tr>
<tr style="border-bottom: solid 1px gray;height: 20px !important;font-size: 11px;font-weight: 700;margin-top:-1% !important">
<td> </td>
<td colspan="10" style="width: 60%; text-align: left; font-size: 10px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
{{ item.description.replace('\n', ' ').replace('\r', '').replace('\t', '+').replace(' ', '+').strip() }}
</td>
</tr>
{%- endfor -%}
</tbody>
</table>
</td>
<td style="width:50%;border: solid 2px gray;">
</td>
</tr>
</table>
<div class="print-footer"> {{ footer }}
</div>
</body>
[/details]I'm facing an issue in ERPNext when generating PDFs from the Sales Invoice print screen. There are two options for PDF generation:
- Print → Save as PDF (Works perfectly, maintains layout and everything)
- Direct PDF Button (Breaks layout: font size, margins, and page size change)
I tried modifying the Print Settings CSS, which affects both methods. While some changes reflect, it also disrupts the "Print → Save as PDF" output.
I've searched and found similar issues, but the solutions are not working in my case as maybe it's outdated or I've different version of Erpnext/Frappe/wkhtmltopdf etc.
What I've Found:
- Wkhtmltopdf rendering without CSS - custom and core - all standard solutions have no affect - ubuntu 18.04
- Generated PDF looks weird, wkhtmltopdf, no bootstrap CSS
- WKHTMLTOPDF not loading local css
- WkHTMLtoPDF not loading local CSS and images
What I've Tried, Resolved:
- Adjusting CSS in Print Settings
- Ensuring
wkhtmltopdfis correctly installed (using the Qt-patched version 0.12.6) - Added "host_name": "example", in sitename/site_config.json and ran command
bench migrate - In my case, pictures (QR, Header, Footer) are displayed, so no issue with paths
Questions:
- How can I apply styles specifically to the PDF button output without affecting Print → Save as PDF?
- Any ERPNext configuration changes needed to standardize both outputs?
I've attached both screenshots:
You'll notice the difference of Font Size, Font Family, Overlapping of texts, Page Size etc.
I've also attached the Print Format to understand the css applied.
[details="Print Format"]
<style>
.print-format table,
.print-format tr,
.print-format td {
font-family: serif;
line-height: 0.3 !important;
vertical-align: middle;
direction: rtl !important;
}
@media print {
body {
font-family: 'Cairo';
width: 220mm;
height: 297mm;
margin: 5mm 5mm 10mm 5mm;
footer {
page-break-after: always;
}
/* change the margins as you want them to be. */
}
}
@media screen {
.print-format {
width: 200mm;
padding: 5mm;
min-height: 297mm;
footer {
page-break-after: always;
}
}
}
table {
width: 100%;
white-space: nowrap;
}
th {
font-size: 10px;
color: black;
}
body:last-child .print-format td img {
width: 60% !important;
}
.ql-editor read-mode {
line-height: 1 !important;
}
.ql-editor p, .ql-editor h1, .ql-editor h2, .ql-editor h3, .ql-editor h4, .ql-editor h5, .ql-editor h6, .ql-editor span {
counter-reset: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
line-height: 1.2;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
display: inline-flex !important;
}
.print-format p {
margin: 3px 0px 3px;
display: inline-block !important;
}
.si {
color: darkblue !important;
margin-top: -5px !important;
}
.w1 {}
.w2 {
border-top: 3px solid #d1d8dd !important;
padding-top: 4px !important;
text-align: center;
direction: rtl;
margin-top: 15px;
}
@media print {
div.print-footer {
display:block !important;
position: fixed !important;
bottom: 0;
width: 97%;
background-color: white;
text-align: center;
padding: 2mm 2;
box-sizing: border-box;
page-break-after: always;
z-index: 9999;
}
div.print-footer .page-number {
position: absolute;
bottom: 5mm;
width: 100%;
text-align: center;
}
@page :first {
table:nth-of-type(4) tr:nth-child(n+10) {
page-break-after: always;
}
}
@page {
table tr:nth-child(28n+1) {
page-break-after: always;
}
}
}
* {
box-sizing: content-box !important;
}
body {
counter-reset: page;
}
/* Define a style for the page number */
.page-number:before {
counter-increment: page;
content: counter(page) " of "counter(pages);
}
</style>
<script>
window.onload = function() {
function insertPageBreaks(tableSelector, firstPageRows, nextPageRows) {
var tables = document.querySelectorAll(tableSelector);
tables.forEach(function(table) {
var rows = table.querySelectorAll('tr');
var rowCount = rows.length;
var currentPage = 1;
var rowsPerPage = currentPage === 1 ? firstPageRows : nextPageRows;
for (var i = rowsPerPage; i < rowCount; i += rowsPerPage) {
var pageBreakRow = document.createElement('tr');
pageBreakRow.className = 'page-break';
rows[i - 1].parentNode.insertBefore(pageBreakRow, rows[i]);
currentPage++;
rowsPerPage = nextPageRows;
}
});
}
insertPageBreaks('table:nth-of-type(4)', 23, 41);
insertPageBreaks('table:nth-of-type(n+5)', 41, 41);
};
</script>
<body>
<table style="white-space: nowrap;margin-top:-4% !important;">
<tr>
<td style="width:50%;">
<!-- Table2 -->
<table style="white-space: nowrap;line-height: 1.3 !important;">
<tr style="line-height: 1.3 !important;">
<td style="width:30%;font-size: 10px;text-align: center;">
<span style="color: #5b5b5b;font-size: 25px;font-weight: 800;text-align: center;line-height: 1;">
<br> {{ "TAX INVOICE" }}
<br> {{ "فاتورة ضريبية " }}
</span>
</td>
</tr>
</table>
</td>
<td style="width:10%;">
<!-- Table1 -->
<table>
<tr>
<td>
<div style="width: 200px !important;text-align: center; display: block !important;margin: 0 149px 0 -13px!important;vertical-align: middle !important;margin-top: 0px !important;">
{{ letter_head }}</div>
</td>
</tr>
</table>
</table>
<table style="white-space: nowrap;table-layout: fixed;">
<tr>
<td style="width:50%;">
<!-- Table1 -->
<table style="white-space: nowrap;table-layout: fixed;">
<tr>
<td>
<div style="width: 200px !important;text-align: center; display: block !important;margin: 0 auto !important;vertical-align: middle !important;margin-top: -25px !important;">
<img class="qr-code" src={{doc.ksa_einv_qr}}>
</div>
</td>
</tr>
</table>
</td>
<td style="width:50%; border: solid 2px gray; ">
<!-- Table2 -->
<table style="white-space: nowrap;table-layout: fixed;line-height: 1.3 !important;">
<tr style="line-height: 1.3 !important;">
<td style="width:30%;font-size: 10px;text-align: left;line-height: 1.3 !important;">
<b>{{ "رقم الفاتورة" }} :</b>
<br>
<b>{{ "تاريخ الفاتورة" }} :</b>
<br>
<b>{{ "رقم العقد " }} :</b>
<br>
<b>{{ "رقم أمر الشراء/الخدمة " }} :</b>
<br>
<b>{{ " تاريخ التوريد/الإنجاز " }} :</b>
<br>
<b>{{ "الرقم المرجعي " }} :</b>
<br>
<b>{{ "رمز البائع " }} :</b>
<br>
</td>
<td style="width:40%;font-size: 10px;text-align: center;line-height: 1.3 !important;">
<b style="color: darkblue;">{{ doc.name }}</b>
<br>
<b style="color: darkblue;"> {{ doc.get_formatted("posting_date") }}</b>
<br>
<b style="color: darkblue;">{{ doc.custom_contract_number or "" }}</b>
<br>
<b style="color: darkblue;">{{ doc.po_no or "" }}</b>
<br>
<b style="color: darkblue;">{{ doc.delivery_date_and_time or "" }}</b>
<br>
<b style="color: darkblue;">{{ doc.custom_rfx_number or "" }}</b>
<br>
<b style="color: darkblue;">{{ doc.custom_vendor_no or "" }}</b>
<br>
</td>
<td style="width:35%;font-size: 10px;text-align: right;line-height: 1.3 !important;">
<b>:{{ "Invoice No" }}</b>
<br>
<b>:{{ "Invoice Date" }}</b>
<br>
<b>:{{ "Contract Number" }}</b>
<br>
<b>:{{ "Order/Service No" }}</b>
<br>
<b>:{{ "Complet/Delivery Date" }}</b>
<br>
<b>:{{ " P.T.Ref" }}</b>
<br>
<b>:{{"Vender No " }}</b>
<br>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table style="white-space:nowrap; table-layout:fixed; margin-top:5px; width:100%; text-align:center;">
<tr>
<td style="width:50%; border:2px solid gray;">
<!-- Table1 -->
<table style="white-space: nowrap; table-layout: fixed; margin-top: -6px; width:100%;">
<tr style="border-bottom: 2px solid black;">
<td style="width:35%; font-size:16px; font-weight:900; text-align:right;"></td>
<td style="width:80%; font-size:12px; font-weight:900; text-align:center;">
<b> {{ " Supplier " }}</b>
<br>
<br>
<br>
<br>
<b> {{ " المورد" }} </b>
</td>
<td style="width:35%; font-size:16px; font-weight:900; text-align:left;"></td>
</tr>
<tr style="border-bottom:1px solid black;">
<td colspan="3" style="font-size:10px; text-align:center;">
<b style="color: darkblue;">{{ "شركة الرواد الفنية للتجارة والمقاولات العامه المحدوده" }}</b>
<br>
<br>
<br>
<br>
<b style="color: darkblue;">{{ "Trading & General Contracting Co. Ltd" }}</b>
</td>
</tr>
<tr style="border-bottom: 1px solid black;">
<td style="width:30%; font-size:10px; text-align:right;">
<b>{{ "الرقم الضريبي" }}:</b>
</td>
<td style="width:40%; font-size:10px; text-align:center; color:darkblue;">
<b>{{ docpany_tax_id }}</b>
</td>
<td style="width:30%; font-size:10px; text-align:left;">
<b>:{{ "VAT ID" }}</b>
</td>
</tr>
<tr style="border-bottom: 1px solid black;">
<td style="width:25% !important; font-size:10px; text-align:center;">
<div style="font-weight:900; padding: 5px; border-bottom: 1px solid black;">
ترخيص الموارد البشرية
</div>
<div style="padding: 5px;">
85953
</div>
</td>
<td style="width:25% !important; font-size:10px; text-align:center;">
<div style="font-weight:900; padding: 5px; border-bottom: 1px solid black;">
السجل التجاري (CR)
</div>
<div style="padding: 5px;">
4030138666
</div>
</td>
<td style="width:25% !important; font-size:10px; text-align:center;">
<div style="font-weight:900; padding: 5px; border-bottom: 1px solid black;">
التامينات الاجتماعية
</div>
<div style="padding: 5px;">
511414695
</div>
</td>
</tr>
<tr>
<td style="width:30%; font-size:10px; text-align:right; height:75px;">
<b>{{ "العنوان" }}:</b>
</td>
<td style="width:40%; font-size:10px; text-align:center; height:75px; line-height:1 !important; color:darkblue;">
<b style="white-space: normal !important;color: darkblue !important;"> {{ frappe.db.get_value("Address", docpany_address, "address_line1") or "" }}
<br>
<br> {{ frappe.db.get_value("Address", docpany_address, "address_in_arabic") or "" }}
</b>
</td>
<td style="width:30%; font-size:10px; text-align:left; height:75px;">
<b>:{{ "Address" }}</b>
</td>
</tr>
</table>
</td>
<td style="width:50%; border:2px solid gray;">
<!-- Table2 -->
<table style="white-space:nowrap; table-layout:fixed; margin-top:-6px; width:100%;">
<tr style="border-bottom: 2px solid black;">
<td style="width:35%; font-size:16px; font-weight:900; text-align:right;"></td>
<td style="width:80%; font-size:12px; font-weight:900; text-align:center;">
<b> {{ " Customer " }}</b>
<br>
<br>
<br>
<br>
<b> {{ " العميل" }} </b>
</td>
<td style="width:35%; font-size:16px; font-weight:900; text-align:left;"></td>
</tr>
<tr style="border-bottom:1px solid black;">
<td colspan="3" style="font-size:10px; text-align:center;">
<b style="color: darkblue;">{{ doc.customer_name_in_arabic or "" }} </b>
<br>
<br>
<br>
<br>
<b style="color: darkblue;">{{ doc.customer_name }} </b>
</td>
</tr>
<tr style="border-bottom:1px solid black;">
<td style="width:30%; font-size:10px; text-align:right;">
<b>{{ "الرقم الضريبي" }}:</b>
</td>
<td style="width:40%; font-size:10px; text-align:center; color:darkblue;">
<b>{{ doc.tax_id or "" }}</b>
</td>
<td style="width:30%; font-size:10px; text-align:left;">
<b>:{{ "VAT ID" }}</b>
</td>
</tr>
<tr style="border-bottom:1px solid black;">
<td style="width:30%; font-size:10px; text-align:right;">
<b>{{ "رقم السجل التجاري"}}:</b>
</td>
<td style="width:40%; font-size:10px; text-align:center; color:darkblue;">
<b>{{ frappe.get_doc("Customer", doc.customer).custom_company_cr or ""}} </b>
</td>
<td style="width:30%; font-size:10px; text-align:left;">
<b>:{{ "CR NO" }}</b>
</td>
</tr>
<tr>
<td style="width:30%; font-size:10px; text-align:right; height:75px;">
<b>{{ "العنوان" }}:</b>
</td>
<td style="width:40%; font-size:10px; text-align:center; height:75px; line-height:1 !important; color:darkblue;">
<b style="white-space: normal !important;color: darkblue !important;"> {{ frappe.db.get_value("Address", doc.customer_address, "address_line1") or "" }}
<br>
<br> {{ frappe.db.get_value("Address", doc.customer_address, "address_in_arabic") or "" }}
</b>
</td>
<td style="width:30%; font-size:10px; text-align:left; height:75px;">
<b>:{{ "Address" }}</b>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--Dynamic Colspan for total row columns-->
{% set col = namespace(one = 2, two = 1) %} {% set length = doc.taxes | length %} {% set length = length / 2 | round %} {% set col.one = col.one + length %} {% set col.two = col.two + length %} {%- if(doc.taxes | length % 2 > 0 ) -%} {% set col.two =
col.two + 1 %} {% endif %}
<!-- Items -->
{% set total = namespace(amount = 0) %}
<table style="margin-top: 15px;direction: ltr !important;white-space:nowrap; table-layout:fixed;">
<thead>
<tr style="border-bottom: solid 2px black;border-top: solid 2px black;line-height: 2 !important;">
<th colspan="1" style="width:3%;text-align:center;color:black;font-size:12px;font-weight: 600;">S
<br>م </th>
<th colspan="3" style="width:57%;text-align:center;color:black;font-size:12px;font-weight: 600;">Description
<br>وصف المنتج </th>
<th colspan="1" style="width:5%;text-align:center;color:black;font-size:12px;font-weight: 600;">QTY
<br>الكمية </th>
<th style="width:10%;text-align:left;color:black;font-size:12px;font-weight: 600;">Unit Price
<br>سعر الوحدة </th>
<th style="width:15%;text-align:left;color:black;font-size:12px;font-weight: 600;">Taxable Amount
<br />الاجمالي قبل الضريبة </th> {% for row in doc.taxes %}
<th style="width:15%;text-align:center;color:black;font-size:12px;font-weight: 600;">Tax Percentage
<br>نسبة الضريبة </th>
<th style="width:10%;text-align:center;color:black;font-size:12px;font-weight: 600;">Tax Amount
<br>مبلغ الضريبة </th> {% endfor %}
<th style="width:15%;text-align:center;color:black;font-size:12px;font-weight: 600;">Total With VAT
<br>المجموع بالضريبة </th>
</tr>
</thead>
<tbody>
{%- for item in doc.items -%} {% set total.amount = item.amount %}
<tr style="margin-bottom: -10px !important;line-height:0.1 !important; height: 20px !important;">
<td colspan="1" style="width: 2%;text-align: center;">{{ item.idx }}</td>
<td colspan="3" style="width: 40%;text-align: left;line-height:0.3!important;font-size: 11px;font-weight: 700;">{{ item.item_code }}</td>
<td colspan="1" style="text-align: center;font-size: 12px;font-weight: 700;">{{ item.qty }}</td>
<td style="text-align: left;font-size: 12px;font-weight: 700;">{{ item.get_formatted("rate") }}</td>
<td style="text-align: left;font-size: 12px;font-weight: 700;">{{ item.get_formatted("amount") }}</td>
{% for row in doc.taxes %} {% set data_object = json.loads(row.item_wise_tax_detail) %} {% set key = item.item_code or item.item_name %} {% set taxable_amount = item.amount %} {% set tax_percentage = data_object[key][0] or 0 %} {% set tax_amount = taxable_amount
* (tax_percentage / 100) %} {% set total.amount = total.amount + tax_amount %}
<td style="text-align: center;font-size: 12px;font-weight: 700;">
<div class="qr-flex"> {%- if data_object[key][0] -%} <span>{{ frappe.format(data_object[key][0], {'fieldtype': 'Percent'}) }}</span> {%- endif -%} </div>
</td>
<td style="text-align: center;font-size: 12px;font-weight: 700;">
<span> {% if data_object[key][0] %} {{ frappe.format_value(tax_amount, currency=doc.currency) }} {% endif %} </span>
</td> {% endfor %}
<td style="text-align: center;font-size: 12px;font-weight: 700;"> {{ frappe.format_value(frappe.utils.flt(total.amount, doc.precision('total_taxes_and_charges')), currency=doc.currency) }} </td>
</tr>
<tr style="border-bottom: solid 1px gray;height: 20px !important;font-size: 11px;font-weight: 700;margin-top:-1% !important">
<td> </td>
<td colspan="10" style="width: 60%; text-align: left; font-size: 10px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
{{ item.description.replace('\n', ' ').replace('\r', '').replace('\t', '+').replace(' ', '+').strip() }}
</td>
</tr>
{%- endfor -%}
</tbody>
</table>
</td>
<td style="width:50%;border: solid 2px gray;">
</td>
</tr>
</table>
<div class="print-footer"> {{ footer }}
</div>
</body>
[/details]Would appreciate any guidance from the community! Thanks.
Share Improve this question asked Mar 12 at 13:53 UsmanSanawarUsmanSanawar 431 silver badge9 bronze badges 1- Commenting for better reach – UsmanSanawar Commented Mar 16 at 14:39
1 Answer
Reset to default 0Try checking your-site-name/assets/css/printview.css on your browser whether it appears or not. If it doesn't appear, it's likely that the CSS for your PDF can't be read properly