Custom Print Format PDF output

Frappe Framework Custom Script
1

Hi,

I’ve been created a custom Jinja sales invoice print format but I’m unable to make the letter-head-footer at the bottom of the PDF output. The footer is being printed at the middle of the page or right after other contents of the invoice. The preview output shows that the footer at the bottom. Could anyone help me with it? The code is given below.

{%- macro add_header(page_num, max_pages, doc, letter_head, no_letterhead) -%}
{% if letter_head and not no_letterhead %}
<div class="letter-head">{{ letter_head }}</div>
{% endif %}
<!--{%- if doc.meta.is_submittable and doc.docstatus==0-%}
<div class="alert alert-info text-center">
    <h4 style="margin: 0px;">{{ _("DRAFT") }}</h4></div>
{%- endif -%}
{%- if doc.meta.is_submittable and doc.docstatus==2-%}
<div class="alert alert-danger text-center">
    <h4 style="margin: 0px;">{{ _("CANCELLED") }}</h4></div>
{%- endif -%}
-->
{% if max_pages > 1 %}
<p class="text-right">{{ _("Page #{0} of {1}").format(page_num, max_pages) }}</p>
{% endif %}
{%- endmacro -%}



{{ add_header(0,1,doc,letter_head, no_letterhead) }}

<div class="text-right">Date: {{ doc.get_formatted("posting_date") or ''}}</div>

<div class="text-right"><b>{{ doc.name or ''}}</b></div>

<!--
<div class="text-left"><b>Customer Name: {{ doc.customer }}</b></div>
<div class="text-left"><b>Address: </b>{{ doc.address_display or ''}}</div>
<div class="text-left"><b>Payment Date: </b>{{ doc.get_formatted("due_date") or ''}}</div>
-->
<p class="text-center" style=" font-size:18px; font-weight:bold; text-decoration: underline; text-decoration-style: double;"><b>{{ _("Invoice") }}</b></p><br>
<div class="row">
        
<div class="col-xs-12">            
    <div class="row">
        <div class="col-xs-3 cdetails "><label>Customer Name:</label></div>
        <b><div class="col-xs-7 text-left cvdetails" style="font-size:120%">{{ doc.customer }} </div></b>
    </div>
    
    <div class="row">
        <div class="col-xs-3 cdetails"><label>Address: </label></div>
        <div class="col-xs-7 text-left cvdetails">{{ doc.address_display or ''}} </div>
    </div>        

    <div class="row">
        <div class="col-xs-3 cdetails"><label>Payment Date: </label></div>
        <div class="col-xs-7 text-left cvdetails">{{ doc.get_formatted("due_date") or ''}} </div>
    </div> 
</div>

<div class="col-xs-6">

       
     {%- if doc.po_no -%}
    <div class="row">
        <div class="col-xs-5 text-right"><label>PO No</label></div>
        <div class="col-xs-7 ">{{ doc.po_no or ''}}</div>
    </div>
     {%- endif -%}
    {%- if doc.po_date -%}
    <div class="row">
        <div class="col-xs-5 text-right"><label>PO Date</label> </div>
        <div class="col-xs-7 ">
            {{ doc.get_formatted("po_date") or ''}}</div>
    </div>  
    {%- endif -%}
</div>
        
</div>
    
<br>

<table class="table table-condensed table-hover table-bordered">
    <tr>
        <th>Sr</th>
        <th>Item Name</th>
        <th>Chinese Name</th>
        <th>Parts No.</th>
        <th class="text-right">Qty</th>
        <th class="text-right">Rate</th>
        <th class="text-right">Amount</th>
        <th style="text-align: center;">Remarks</th>
    </tr>
    {%- for row in doc.items -%}
    <tr>
        <td style="width: 3%;">{{ row.idx }}</td>
        <td style="width: 20%; text-align: left;">{{ row.item_name }}</td>
        <td style="width: 20%; text-align: left;">{{ row.chinese_name }}</td>
        <td style="width: 20%; text-align: left;"> {{ row.item_code or '' }}</td>
        <td style="width: 05%; text-align: right;">{{ row.qty }}</td>
        <td style="width: 07%; text-align: right;">{{ row.get_formatted("rate", doc) or ''}}</td>
        <td style="width: 10%; text-align: right;">{{row.get_formatted("amount", doc) or ''}}</td>
        <td style="width: 15%; text-align: center;">{{ row.remarks }}</td>
    </tr>
    {%- endfor -%}
</tbody>
</table>
<br>

<div class="row">
<div class="col-xs-6 text-right"></div>
<div class="col-xs-4 text-right"><label>{{ _("Total Quantity") }}</label></div>
<div class="col-xs-2 text-right">
  {{ doc.get_formatted("total_qty") or '' }}
</div>
</div>
   
<div class="row">
<div class="col-xs-6 text-right"></div>
<div class="col-xs-4 text-right"><label>{{ _("Net Total") }}</label></div>
<div class="col-xs-2 text-right">
  {{ doc.get_formatted("total") or '' }}
</div>
</div>  


{%- if doc.discount_amount -%}
<div class="row">
     <div class="col-xs-6 text-right"></div>
     <div class="col-xs-4 text-right"><label>{{ _("Discount") }}</label></div>
     <div class="col-xs-2 text-right">{{ doc.get_formatted("discount_amount") }}</div>
</div> 
 {%- endif -%}         
       
<div class="row">
<div class="col-xs-6 text-right"></div>
<div class="col-xs-4 text-right"><label>{{ _("Grand Total") }}</label></div>
<div class="col-xs-2 text-right">{{ doc.get_formatted("grand_total") }}</div>
</div>

<div class="row">
<div class="col-xs-6 text-right"></div>
<div class="col-xs-4 text-right"><label>{{ _("Rounded Total") }}</label></div>
<div class="col-xs-2 text-right" style="text-decoration:underline">{{ doc.get_formatted("rounded_total") }}</div>
</div>

<div class="row">
<div class="col-xs-6 text-right"></div>
<div class="col-xs-4 text-right" style="text-decoration:underline;"><label>{{ _("Due Amount") }}</label></div>
<div class="col-xs-2 text-right" style="text-decoration:underline; text-decoration-style:double">{{ doc.get_formatted("outstanding_amount") }}</div>
</div>
<div class="row">
<div class="col-xs-2 text-left"><label>{{ _("In Words:") }}</label></div>
<div class="col-xs-10 text-left;" style="margin-left: -45px; " >{{ doc.get_formatted("in_words") }}</div>
</div>



{%- macro add_footer(page_num, max_pages, doc, letter_head, no_letterhead) -%}
{% if letter_head and not no_letterhead %}
<div class="letter-head-footer visible-pdf">{{ footer }}</div>
{% endif %}

{%- endmacro -%}

{{ add_footer (0,1,doc,letter_head, no_letterhead) }}

I have also given few extra css to test some changes.

.cdetails {width: 20%}
.cvdetails {margin-left: -30px;}
.print-format {background-color:white; box-shadow: 0px 0px 9px rgba(0,0,0,0.5); max-width: 8.3in; max-height: 11.69in; padding-top: 0in; padding-left: .5in; padding-right: 0in; margin: 0px; }
.visible-pdf { display: block !important; order: 1; margin-top: auto; }
.pdf-viewer { display: block !important; order: 1; margin-top: auto; }
.print-format { display: flex; flex-direction: column; }

image
image993×647 23.2 KB

Thanks in advance.

5

Hi…
Try this code… Its work for me…

{% if letter_head %}
{{ letter_head }}
{% endif %}
Tax Invoice
Invoice To : {{doc.customer_name}}
{{doc.address_display}}
Ship To : {{doc.shipping_address}}
Invoice No : {{doc.name}}
Invoice Date : {{doc.posting_date}}
Purchase Order No : {{doc.po_no}}
Purchase Order Date : {{doc.po_date}}
Terms of Payment : {{doc.terms_of_payment}}



{%- for row in doc.items -%} {%- endfor -%}
S.No Description of Goods HSN/SAC UOM Qty Rate Amount
{{row.idx }} {{row.item_name}} ({{row.serial_no}}) {{row.gst_hsn_code}} {{row.uom}} {{row.get_formatted("qty")}} {{row.get_formatted("base_price_list_rate")}} {{row.get_formatted("amount")}}

Total Rupees(in words) :{{doc.in_words}}
{%- for row in doc.taxes -%} {%- if row.tax_amount -%} {%- endif -%} {%- endfor -%}
Total : {{doc.get_formatted("total")}}
{{ row.description }} : {{ row.get_formatted("tax_amount", doc) }}
Round Off : {{doc.get_formatted("rounding_adjustment")}}
Gross Payable : {{doc.get_formatted("rounded_total")}} 
<div class="row2">
    <div class="col-xs-6">
         
    </div>
    
    <div class="col-xs-6">
        <table>
            <tr>
                <td class="col-xs-3"><b>Mode of Transport</b></td>
                <td class="col-xs-3">: {{doc.mode_of_transport}}</td>
            </tr>
            <tr>
                <td class="col-xs-3"><b>Transporter Name</b></td>
                <td class="col-xs-3">: {{doc.transporter_name}}</td>
            </tr>
            <tr>
                <td class="col-xs-3"><b>Freight Payment Terms</b></td>
                <td class="col-xs-3">: {{doc.freight_payment_terms}}</td>
            </tr>
        </table>
    </div>
</div>




Received the above goods in good condition

For {{frappe.get_fullname(doc.company)}}




Prepared By: {{ frappe.get_fullname(doc.owner) }}

Checked By: {{ frappe.get_fullname(doc.modified_by) }}

Authorized Signatory

{% if footer %}
{{ footer }}
{% endif %}

{{ _("Page {0} of {1}").format('', '') }}

.print-format th { background-color: white !important; border-top: 1px solid black; } .print-format thead { background-color: white !important; border-top: 1px solid black; } @media print { div.print-footer { position: absolute; overflow: hidden; right: 0; bottom: 0; left: 0; } p,td, th { font-size:12px; } }
6

Hi,

@media print { div.footer { position: absolute; overflow: hidden; right: 0; bottom: 0; left: 0; } }

This code should do the trick. It didn’t though. Is there any services that I need to restart so that the changes gets impacted?

1 Like
7

Hi,
Please refer below link. Hope this will help
Issue with Header and footer in print format and pdf - #7 by shradhdha03

8

Thanks! This helps me generating PDF with letterhead at the bottom of the page. If I use the print function from the invoice page, the footer alignment gets messy.

When I click the print command, the print preview is this: [Footer shows at the bottom]

print%20view
print%20view800×748 49.2 KB

After printed, it shows this: [Footer gets aligned in the middle!]

printed
printed782×631 28.9 KB

But Generating PDF is all okay.

PDF
PDF996×843 40.7 KB

I guess I will have to use PDF>Print instead direct print command.

Thank you again.