Custom Page Size and Print preview layout

Frappe Framework Print Formats
1

How can I generate a print preview layout similar to pdf layout?
Currently preview and pdf are very different.

Please find my code and screenshot of preview layout and pdf layout.

<style>
    .print-format table, .print-format tr, 
    .print-format td, .print-format div, .print-format p {
        line-height: 10mm;
                font-family: Monospace;
                font-size: 11pt;
        vertical-align: middle;

                
    }
    @media screen {
        .print-format {
            width: 240mm;
                   
            min-height: 280mm;
        }
    }
         table.absolute0 {
            position: absolute;
            top: 50mm;
            left: 0mm;
            width: 240mm;
            }
         table.absolute{
             position:absolute;
             top: 80mm;
             left: 0mm;
             width: 240mm;
             }
         
</style>
{%- 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 -%}
<small>
{{ add_header(0,1,doc,letter_head, no_letterhead) }}
<big>
<p class="text-center"><b>{{ _("Sales Invoice") }}</b></p><br>
</big>
<br>
<table class="absolute0" ,class="table">
    <thead>
        <tr>
            <th class = "text-left"></th>
            <th class="text-left"></th>
            <th class = "text-left"></th>
            <th class="text-left"></th>
        </tr>
    <thead>
<tbody>
        <tr>
            <td style="width: 50mm;text-align:left"><b>ISSUED TO: </b>
                 
                <br>
                <b>ADDRESS:</b>
            </td>   
            <td style="width: 100mm;text-align:left"> {{ doc.customer }} 
                 <br>
                 {{ doc.address_display or ''}} 
            </td>      
            <td style="width: 20mm;text-align: right"><big></b>NO.</b>
             
               <br>
                <b>DATE:</b>
            </td>  
            <td style="width: 70mm;text-align: left">   {{ doc.name or ''}} 
               <br> 
               {{ doc.get_formatted("posting_date") or ''}}
           </td>      
        </tr>

    </tbody>
</table>
     
<br>

<table class="absolute" ,class="table table-condensed table-hover table-bordered">
    <thead>
        <tr>
            <th class = "text-left">Sr</th>
            <th class="text-left">ITEM CODE</th>
            <th class="text-left">PART NO.</th>
            <th class = "text-left">DESCRIPTION</th>
            <th class = "text-left">BIN LOCATION</th>
            <th class = "text-left">QTY.</th>
            <th class = "text-left">UNIT PRICE</th>
           <th class = "text-left"> AMOUNT</th>
        </tr>
    <thead>
    <tbody>
        {%- for row in doc.items -%}
        <tr>
            <td style="width: 3mm;text-align:left">{{ row.idx }}</td>
            <td style="width: 32mm;text-align:left;">
               {{ row.option or ''}}  {{ row.item_code}}
            </td>
            <td style="width: 40mm;text-align: left">
               {{ row.option or ''}}  {{ row.manufacturer_part_no}}
            </td>
            <td style="width: 30mm;text-align: left;">
               {{ row.option or ''}}  {{ row.item_name}}
            </td>
            <td style="width: 20mm;text-align: left;">
               {{ row.option or ''}}  {{ row.bin_location or ''}}
            </td>
         <td style="width: 19mm; text-align: left;">
                {{row.option or ''}} {{ row.qty}}
            </td>
    
         <td style="width: 19mm; text-align: left;">{{ row.get_formatted("rate", doc) or ''}} </td>    
            <td style="width: 23mm; text-align: left;">{{ row.get_formatted("amount", doc) or ''}} </td>    
           
        </tr>
        {%- endfor -%}

    </tbody>
</table>
<style>
div.net-amount {
    position: absolute;
    top: 300mm;
    left: 145mm;  
}
div.grand-total {
    position: absolute;
    top: 300mm;
    left: 210mm;  
}
</style>
 <div class="net-amount"><big><b>NET AMOUNT </b></big></div>
 <div class="grand-total"><big>{{ doc.grand_total or ''}}</big> </div>
</small>

pdf layout

pdf_preview.png992×629 24.4 KB

print preview layout

print_preview.png1128×487 29.6 KB

Please provide any suggestions for making the preview look like pdf preview.

2

I think you should add position: relative to the parent element i.e .print-format

3

adding position: relative under media screen has shifted the print preview to right. Did I miss something here?

@media screen {
        .print-format {
            width: 240mm;
                         
            min-height: 280mm;
                        position: relative;
        }
    }

print_preview_right.png1213×604 35.5 KB

4

This is because you are using mm as the unit for elements. You can use %