I am creating a custom sales invoice print format using html below is the correct format :-
while clicking on pdf format the format changes as follows :-
Can you share your custom code?
For flex you need to provide vendor specific syntaxes for it to read properly in wkhtmltopdf.
In the same order:
.d-flex {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
For English content
.t-en{
-webkit-box-pack: flex-start;
-ms-flex-pack: flex-start;
justify-content: flex-start;
}
For Arabic content
.t-ar{
-webkit-box-pack: flex-end;
-ms-flex-pack: flex-end;
justify-content: flex-end;
}
1 Like
Print Format Custom CSS then add the class names to your divs.
still its not working the format is still not correct!
Ditch the table, make it as flex rows and columns. If you need help with this DM me access credentials or alternatively DM me the HTML code for the print format.
1 Like
<!DOCTYPE html>
<div class="main">
<!--letter head-->
<div style="display:flex; justify-content:space-around; align-items:center;">
<div style="text-align:left; font-size:12px;">
<h1>company name </h1>
<p>Muscat, Al Amarat</p>
<p>Al Amarat - 456781.</p>
<p>Mob: +0</p>
<p>VATIN: Ogert</p>
<p>E-mail: A@gmail.com</p>
</div>
<div>
<img src="/files/logo.png" alt="MTC" style="width: 250px;">
</div>
<div style="text-align:right; font-size:12px;">
<h1>العناية بالمحرك</h1>
<p> 52, 1577, مسقط, العامرات</p>
<p>456781 - العامرات </p>
<p>+968 090 : رقم الهاتف المحمول</p>
<p>OM5 : ضريبة القيمة المضافة</p>
<!--<p>A.@gmail.com : البريد الإلكتروني</p>-->
<p>: بريد إلكتروني A@gmail.com</p>
</div>
</div>
<!--invoice details-->
<hr>
<div style="text-align:center;">
<h1> فاتورة ضريبية</h1>
<h1 style="text-decoration:overline">Tax Invoice</h1>
</div>
<table class="table" >
<tbody>
<tr>
<td colspan="2" rowspan="7">
<div style="text-align:left;">
<p> <b>Customer Name :-</b> {{doc.customer}} </p>
<p> <b>Country :-</b> Sultanate of Oman </p>
<p> <b>Place Of Supply :-</b> {{doc.company_address_display}} </p>
</div>
<div style="text-align:right; margin-top:2vw;">
<p> {{doc.customer}} <b> -: اسم الزبون</b> </p>
<p> Sultanate of Oman <b>-: دولة</b> </p>
<p> <b> -: مكان التوريد</b><br> {{doc.company_address_display}} </p>
</div>
</td>
<td colspan="4">
<div style="display:flex; justify-content:space-evenly;">
<p>Invoice No :</p>
<p>: رقم الفاتورة </p>
</div>
{{doc.name}}
</td>
<td colspan="3">
<div style="display:flex; justify-content:space-between;">
<p>Dated :</p>
<p>: بتاريخ</p>
</div>
<!--{{doc.posting_date}} -->
{{ doc.get_formatted('posting_date') }}
</td>
</tr>
<tr>
<td colspan="4">
<div style="display:flex; justify-content:space-between;">
<p>Delivery Note: </p>
<p>: مذكرة تسليم</p>
</div>
<!--Note-ex-01-->
</td>
<td colspan="3">
<div style="display:flex; justify-content:space-between;">
<p>Delivery Note date:</p>
<p>:تاريخ مذكرة التسليم</p>
</div>
<!--{{frappe.utils.getdate(doc.posting_date).strftime("%m-%m-%Y")}}-->
{{ doc.get_formatted('posting_date') }}
<!--{{doc.posting_date}} -->
</td>
</tr>
<tr>
<td colspan="4">
<div style="display:flex; justify-content:space-between;">
<p>Supplier's Ref: </p>
<p>:مرجع المورد</p>
</div>
<!--Sup-01-->
</td>
<td colspan="3">
<div style="display:flex; justify-content:space-between;">
<p>Other Reference(s):</p>
<p>:مرجع آخر</p>
</div>
<!--Oth-ref-->
</td>
</tr>
<tr>
<td colspan="4">
<div style="display:flex; justify-content:space-between;">
<p>Buyer's Order No:</p>
<p>:رقم طلب المشتري</p>
</div>
{{doc.po_no}}
</td>
<td colspan="3">
<div style="display:flex; justify-content:space-between;">
<p>Dated:</p>
<p>:بتاريخ</p>
</div>
{{doc.po_date}}
</td>
</tr>
<tr>
<td colspan="4">
<div style="display:flex; justify-content:space-between;">
<p>Despatch Document No:</p>
<p>:رقم مستند الإرسال</p>
</div>
<!--Des-Dc-->
</td>
<td colspan="3">
<div style="display:flex; justify-content:space-between;">
<p>Mode/Terms of Payment:</p>
<p>:طريقة / شروط الدفع</p>
</div>
{{doc.payment_terms_template }}
</td>
</tr>
<tr>
<td colspan="4">
<div style="display:flex; justify-content:space-between;">
<p>Despatch Through:</p>
<p>:إرسال من خلال</p>
</div>
</td>
<td colspan="3">
<div style="display:flex; justify-content:space-between;">
<p>Destination:</p>
<p>:وجهة</p>
</div>
{{doc.address_display}}
</td>
</tr>
<tr>
<td colspan="7">
<div style="display:flex; justify-content:space-between;">
<p>Terms of Delivery:</p>
<p>:شروط التوصيل</p>
</div>
</td>
</tr>
<tr>
<th>
<p>Sr</p>
<p> رقم سري </p>
</th>
<th colspan="2">
<p>Description</p>
<p>وصف</p>
</th>
<th>
<p>Qty</p>
<p>كمية</p>
</th>
<th>
<p>Disc %</p>
<p>تخفيض</p>
</th>
<th>
<p>Disc Amt (OMR)</p>
<p>مقدار الخصم</p>
</th>
<th>
<p> Amount (OMR)</p>
<p>كمية</p>
</th>
<th class="text-right">
<p>Total Incl. VAT (OMR)</p>
<p>إجمالي ضريبة القيمة المضافة متضمنة</p>
</th>
</tr>
{%- set total_rows = 7 - doc.items|length %}
{%- for row in doc.items -%}
<tr>
<td style="width: 3%;">{{ row.idx }}</td>
<td colspan="2" style="width: 30%;">
<div style="display:flex; align-items:center; justify-content:center;">
{{ row.description }}
</div>
</td>
<td style="width: 10%; text-align: center;">
{{ row.qty }}
<!--{{ row.uom or row.stock_uom }}-->
</td>
<td style="width: 5%; text-align: center;">
{{ row.discount_percentage }}
</td>
<td style="width: 5%; text-align: center;">
{{ row.discount_amount }}
</td>
<td style="width: 15%; text-align: right;">
{{ row.get_formatted("rate", doc) }}
</td>
<td style="width: 15%; text-align: right;">
{{row.get_formatted("amount", doc) }}
</td>
</tr>
{%- endfor -%}
{%- if total_rows > 0 -%}
{%- for i in range(total_rows) -%}
<tr style="padding: 10px;">
<td style=""> </td>
<td colspan="2" style=""> </td>
<td style=" text-align: right;"> </td>
<td style=" text-align: right;"> </td>
<td style=" text-align: right;"> </td>
<td style=" text-align: right;"> </td>
<td style=" text-align: right;"> </td>
<!--<td style="width: 15%; text-align: right;"> </td> -->
</tr>
{%- endfor -%}
{%- endif -%}
<tr>
<td rowspan="1" colspan="5">
<p>
<b>
Amount Chargable (in words)
</b>
<b>
المبلغ القابل للتحصيل (بالكلمات)
</b>
<br>
<b>
{{frappe.utils.money_in_words(doc.grand_total)}}
<!--{{doc.in_words}}-->
</b>
</p>
</td>
<td colspan="3">
<div style="display:flex; justify-content:space-between;">
<p>Taxable Value \ <span>القيمة الخاضعة للضريبة</span> :- </p>
{{ "{:,.3f}".format(doc.total) }}
<!--<p> {{doc.total}} </p>-->
</div>
<div style="display:flex; justify-content:space-between;">
<p>Value Added Tax \ <span>ضريبة القيمة المضافة</span> :- </p>
<p> {{ "{:,.3f}".format(doc.total_taxes_and_charges) }} </p>
<!--<p> {{doc.total_taxes_and_charges}} </p>-->
</div>
</td>
</tr>
<tr>
<td rowspan="1" colspan="5">
<div >
<p>Vehicle :
<!--Ferrari-->
<!--{{doc.custom_vehicle}}-->
{{doc.custom_model}} {{doc.custom_make}} {{doc.custom_year}}
</p>
<p>PH :
<!--+968 95807090-->
{{doc.custom_phone}}
</p>
<p>Email :
<!--motorcare@gmail.com-->
{{doc.custom_email}}
</p>
</div>
</td>
<td colspan="3">
<div style="display:flex; justify-content:space-between;">
<p> <b>Invoice Total \ <span>إجمالي الفاتورة</span> :-</b></p>
<p> <b>{{ "{:,.3f}".format(doc.grand_total) }}</b></p>
<!--<p> <b>{{ doc.grand_total }}</b></p>-->
</div>
</td>
</tr>
<tr>
<td colspan="10">
<p style="margin-bottom:10px;"><b>Remarks \ <span>ملاحظة</span> :-</b> {{doc.tc_name}} </p>
<p><b>Declaration \ <span>تصريح</span> :- </b>We declare that this invoice shows the actual price of the goods described and that all particulars are true and correct.</p>
</td>
</tr>
<tr>
<td colspan="8">
<div style="display:flex; justify-content:space-between; margin-top:5vw;">
<p><b>Customer's Seal and Signature</b> <br><span>ختم العميل وتوقيعه</span> </p>
<p><b>Authorized Signature</b><br><span>توقيع معتمد</span></p>
</div>
</td>
</tr>
</tbody>
</table>
</div>
css here
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300&display=swap');
.main {
font-family: 'Roboto Mono', monospace;
}
body p{
color:black;
}
.table{
border-collapse: collapse;
}
.table td, th, tr{
border: 1px solid black;
border-top: 1px solid black !important;
color:black;
}
.footer {
position: fixed;
left: 0;
bottom: 0;
display:flex;
justify-content:space-between;
align-items:center;
}
.new-page {
page-break-before: always;
}
.Detail p {
color: red !important;
}
.flex{
display:flex;
justify-content:space-between;
}
.vertical-line{
height:50vw;
width:0;
margin-left:2vw;
margin-right:2vw;
border:1px solid black;
}
.vertical-line-disc{
height:25vw;
width:0;
margin-left:2vw;
margin-right:2vw;
border:1px solid black;
}
.flex-left1{
width:140%;
}
.flex-right{
text-align:right;
}
type or paste code here