Printing sales invoice custom layout

Frappe Framework Print Formats
1

  1. On screen layout.

    Preview.JPG969×900 55.1 KB

  2. PDF Preview and Printout

    2.JPG648×815 27.7 KB

Can anyone suggest a solution why the onscreen layout and print do not match?

I’ve tried this line of code to no effect.

@media print {
.print-format {
width: 8.5in;
padding: 0.25in;
min-height: 6.49in;
}

I might have done this incorrectly. I’m not so sure. Please help!

Thanks!
Aaron

2

Is there any suggestion for the same??

I am also facing similar problem as preview layout and actual printed layout(pdf layout) do not match.
i’ve also tried this line of code already.
@media print {
.print-format {
width: 8.5in;
padding: 0.25in;
min-height: 6.49in;
}

3

Hello @koshish! I got someone to redo my code so it was not the media print settings that had an issue. Try to study my custom code.

<style>
.print-format table, .print-format tr,
.print-format td, .print-format div, .print-format p {
font-family: Monospace;
line-height: 15px;
vertical-align: middle;
}
@media screen {
.print-format {
width: 8.5in;
padding: 0 0.25in 0 0.25in;
min-height: 6.49in;
border: 1px; 
border-style: dashed;
border-color: red;
}
}

        .headerrow {
              margin-top: 55px;
              width: 100%;
        }

        .headerrow td {
            padding: 0px 15px 0px 15px !important;
            font-size: 10pt;
        }
       
        .footerrow {
              width: 87%;
              margin-left: 1in;
        }

        .footerrow td {
            padding: 0px 15px 0px 15px !important;
            font-size: 10pt;
        }

        .itemCell td {
           padding: 0px !important;
        }

        .total {
           font-size: 20px;
           font-weight: bold;
        }

        .itemDiv {
           width: 100%;
           height: 2in;
           font-size: 10pt;
        }
</style>

<table class="headerrow">

  <tr>
{%- if doc.tax_id -%}
    <td class="col-md-2"></td>
    <td class="col-md-5">{{ doc.customer_name }} [{{ doc.tax_id}}]</td>
    <td class="col-md-1"></td>
    <td class="col-md-4 text-right">{{ doc.get_formatted("posting_date") }}</td>
{%- else -%}
    <td class="col-md-2"></td>
    <td class="col-md-5">{{ doc.customer_name }}</td>
    <td class="col-md-1"></td>
    <td class="col-md-4 text-right">{{ doc.get_formatted("posting_date") }}</td>
{%- endif -%}
  </tr>

  <tr>
    <td class="col-md-2"></td>
    <td class="col-md-5">{%- if doc.address_display -%}{{ doc.address_display.split("\n")[0] }}, {{ doc.address_display.split("\n")[1] }}{{ doc.address_display.split("\n")[2] }}{%- else -%}<br /><br />{%- endif -%}
</td>
    <td class="col-md-1"></td>
    <td class="col-md-4 text-right">{{ doc.name }}</td>
  </tr>
  <tr>
    <td class="col-md-2"></td>
    <td class="col-md-5">Sales Person: {{ doc.sales_person }}</td>
    <td class="col-md-1"></td>
    <td class="col-md-4 text-right"></td>
  </tr>
</table>
<br><br>

<div class="itemDiv"><table style="max-height: 2in; width: 100%;" class="itemCell">
{%- for row in doc.items -%}
<tr>
<td style="width: 10%; text-align: left;"><span>{{ row.qty }} {{ row.uom or row.stock_uom }}</span></td>
<td style="width: 10%; text-align: center;">
{{ row.item_code}}
</td>
<td style="width: 50%;">
<div style="border: 0px;">{{row.item_name}}</div></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 -%}
</table>
</div>

<table class="footerrow">
    
<tr>
{%- if doc.discount_amount -%}
    <td class="text-left" style="width: 40%;">Adtl Discount: - {{ doc.get_formatted("discount_amount") }}</td>
    <td class="text-left" style="width: 10%;"></td> 
    <td class="col-md-3"></td> 
    <td class="col-md-3 text-right">{{ doc.get_formatted("grand_total") }} </td>
{%- else -%}
    <td class="text-left" style="width: 40%;"></td> 
    <td class="text-left" style="width: 10%;"></td> 
    <td class="col-md-3"></td> 
    <td class="col-md-3 text-right">{{ doc.get_formatted("grand_total") }} </td>
{%- endif -%}
</tr>

<tr>
    <td class="text-left" style="width: 40%;"></td> 
    <td class="text-left" style="width: 10%;"></td>
         {% if doc.get("taxes", filters={"included_in_print_rate": 1}) %}
         {%- for row in doc.taxes -%}
         {%- if row.included_in_print_rate -%}
    <td class="col-md-3"></td> 
    <td class="col-md-3 text-right"> {{ row.get_formatted("tax_amount_after_discount_amount", doc) }}                 </td>
</tr>

<tr>
    <td class="text-left" style="width: 40%;">{{ doc.get_formatted("grand_total") }} </td> 
    <td class="text-left" style="width: 10%;"></td>
    <td class="col-md-3"></td> 
    <td class="col-md-3 text-right">{{ doc.get_formatted("net_total") }} </td>
</tr>

<tr>
    <td class="text-left" style="width: 40%;"> 0.00 </td> 
    <td class="text-left" style="width: 10%;"></td>
    <td class="col-md-3"></td> 
    <td class="col-md-3 text-right"> 0.00 </td>
</tr>

<tr>
    <td class="text-left" style="width: 40%;"> 0.00 </td> 
    <td class="text-left" style="width: 10%;"></td>
    <td class="col-md-3"></td> 
    <td class="col-md-3 text-right"> {{ doc.get_formatted("net_total") }} </td>
</tr>

<tr>
    <td class="text-left" style="width: 40%;"> {{ row.get_formatted("tax_amount_after_discount_amount", doc) }}
 </td> 
    <td class="text-left" style="width: 10%;"></td>
    <td class="col-md-3"></td> 
    <td class="col-md-3 text-right">{{ row.get_formatted("tax_amount_after_discount_amount", doc) }}                  </td>
</tr>

<tr>
    <td class="text-left" style="width: 40%;">Balance: {{ doc.get_formatted("outstanding_amount") }}</td> 
    <td class="text-left" style="width: 10%;"></td>
    <td class="col-md-3"></td> 
    <td class="col-md-3 text-right"><span class="total">{{ doc.get_formatted("grand_total") }}</span> </td>
</tr>

</table>
    {%- endif -%}
    {%- endfor -%}
    {%- endif -%}