How to define Left and Right Margin for PDF and Print

[jkeersmaekers]

I would also be very interested in the basic start steps for making ERPNext print previews work with wkhtmltopdf.
It is not only the margins that I struggle with (just took the default ones after a while).
Also coloring, outlining and fonts are giving me a challenge.

[ruchin78]

Hi @cpurbaugh @jkeersmaekers @fasilkaks @Muthu
I got the code from where it can be changed but I have no idea how to override this function.
There is a file called pdf.py

frappe/frappe/blob/develop/frappe/utils/pdf.py

check line number 56 and 57

		'margin-right': '15mm',
		'margin-left': '15mm',

Just change it as per your requirement see the magic.
Now, I appreciate if anyone from the community can let me know, how should I override this function and change its value to

		'margin-right': '.5mm',
		'margin-left': '.5mm',

For better understanding let me tell you this function is called via a function

download_pdf which is under print.py

frappe.templates.pages.print.download_pdf

and again

frappe.templates.pages.print.download_pdf

this is called from a file called

form.min.js

frappe-bench/sites/assets/js/form.min.js

Regards
Ruchin Sharma

[fasilkaks]

Hi Ruchin,

Thanks for the input!

Changed the margin-right and margin-left of line 56 and 57 of pdf.py and reloaded by restarting the machine. Got it working Its a hard coding though…

[ruchin78]

@fasilkaks
I will not recommend you to change the source code because it will not allow you to update your ERPNext.
Therefore, I wanted to know the functionality to override the function.

Regards
Ruchin Sharma

[fasilkaks]

@ruchin,

Won’t be able to update ERPNext? Or all the changes that we make will be overridden by the new code on update?

KR

[ruchin78]

@fasilkaks
You wouldn’t be able to update your ERPNext.

Then you may need to follow these instructions:

Update Error: Changes made?

Hi daniel, You have made changes to frappe/templates/styles/standard.css file. Please revert changes and try to update apps again.

Regards
Ruchin Sharma

[Muthu]

@ruchin78. I dont know why setting the below in the CSS is not working for you , I mean getting reflected in the pdf ,
but it works like a charm for me ?

.print-format {
  margin-top: 0mm;
  margin-left: 10mm;
  margin-right: 0mm;
}

[ruchin78]

@Muthu
I have tried a lot but it didn’t work for me.
Can you please share your code for print format as well as the CSS for the same.

Regards
Ruchin Sharma

[Muthu]

@ruchin78 .

`{%- 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="row" ; style="width: 750px">  



 <div class="row">
<div  class="col-xs-1"; style="width: 25%;text-align:left;  padding-left: 0;padding-right: 0; height: 20px; "><big><b></b></big></div>
<div  class="col-xs-1"; style="width: 40%;text-align:left;  padding-left: 0;padding-right: 0; height: 30px; "><big><h1><u>Sample Tryout Report</u></h1></big></div>
</div>


<div class="row">
<div  class="col-xs-1"; style="width: 15%;text-align:left;  padding-left: 0;padding-right: 0; height: 30px; "><big><b></b></big></div>

</div> 




<div class="row">
<div  class="col-xs-1"; style="width: 20%;text-align:left;  padding-left: 0;padding-right: 0; height: 30px; "><big><b>Customer</b></big></div>
<div  class="col-xs-1"; style="width: 20%;text-align:left;padding-left: 0;padding-right: 0; height: 30px"><big><b>{{ doc.customer or ""}}</b></big></div>
<div  class="col-xs-1"; style="width: 5%;text-align:left;  padding-left: 0;padding-right: 0; height: 30px; "><big><b></b></big></div>
<div  class="col-xs-1"; style="width: 20%;text-align:left;  padding-left: 0;padding-right: 0; height: 30px; "><big><b>Part number</b></big></div>
<div  class="col-xs-1"; style="width: 20%;text-align:left;padding-left: 0;padding-right: 0; height: 30px"><big><b>{{ doc.part_number or ""}}</b></big></div>
</div>

<div class="row">
<div  class="col-xs-1"; style="width: 20%;text-align:left;  padding-left: 0;padding-right: 0; height: 30px; "><big><b>Part Description</b></big></div>
<div  class="col-xs-1"; style="width: 20%;text-align:left;padding-left: 0;padding-right: 0; height: 30px"><big><b>{{ doc.part_des or ""}}</b></big></div>
<div  class="col-xs-1"; style="width: 5%;text-align:left;  padding-left: 0;padding-right: 0; height: 30px; "><big><b></b></big></div>
<div  class="col-xs-1"; style="width: 20%;text-align:left;  padding-left: 0;padding-right: 0; height: 30px; "><big><b>Date</b></big></div>
<div  class="col-xs-1"; style="width: 20%;text-align:left;padding-left: 0;padding-right: 0; height: 30px"><big><b>{{ doc.date or ""}}</b></big></div>
</div>











<div class="row">
<div  class="col-xs-1"; style="width: 15%;text-align:left;  padding-left: 0;padding-right: 0; height: 20px; "><big><b></b></big></div>

</div> 




  <table style="width: 90%; class="table elements-bordered">
	<tbody>
		<tr>
			<th>Tryout</th>
			<th>Input</th>
			<th>Observation</th>
			<th>Image</th>
                        
		</tr>
		{%- for row in doc.tryouts -%}
		<tr>
               
<td style="width: 6%;">
                <div style="border: 0px solid #000 ;">{{ row.data }}</div></td>
</td>
<td style="width: 6%;">
				<div style="border: 0px solid #000 ;">{{ row.input }}</div></td>
<td style="width: 6%;">
				<div style="border: 0px solid #000 ;">{{ row.obs }}</div></td>

<td style="width: 6%;">
				<div style="border: 0px solid #000 ;"><img src="{{ row.image }}"
                  
</td>
</tr>
		{%- endfor -%}
	</tbody>
</table>



<div class="row">
<div  class="col-xs-1"; style="width: 15%;text-align:left;  padding-left: 0;padding-right: 0; height: 20px; "><big><b></b></big></div>

</div> 










    

<div class="row">
<div  class="col-xs-1"; style="width: 15%;text-align:left;  padding-left: 0;padding-right: 0; height: 20px; "><big><b>Conclusion :</b></big></div>
</div> 

<div class="row">
<div  class="col-xs-1"; style="width: 70%;text-align:left;padding-left: 0; padding-right: 0;height: 20px"><big>{{ doc.conc or ""}}</big></div>
</div> 


<div class="row">
<div  class="col-xs-1"; style="width: 15%;text-align:left;  padding-left: 0;padding-right: 0; height: 120px; "><big><b></b></big></div>

</div> 




<div class="row">

<div style="max-width: 300px"><img src="{{ doc.position }}"
</div> 
<br>
</div>  

and the css

.print-format {
  margin-top: 0mm;
  margin-left: 10mm;
margin-right: 0mm;

}
hr{
   border: 0.5px solid #000000;
}

table, th, td {
   border: 1px solid black;
}

and which version are you in ?

[ruchin78]

Hi @Muthu,

Thanks for sharing your code, but for me the code is not working at all.
See this:

PDF with left margin 0mm:

PDF with left margin 5mm:

Regards
Ruchin Sharma

[Muthu]

Hi @ruchin78

Set left margin to 12mm and check

Thanks

[ruchin78]

@Muthu
See the screenshot below with 12mm left margin:

I want a small amount of left margin whereas it is huge and doesn’t fulfill my requirement.

Regards
Ruchin Sharma

[Muthu]

@ruchin78 .

It is just a trial and error method ,if 12mm is not ok then try 8mm ,play with it for some time and you will be able to achieve what you want .

Thanks

[ruchin78]

@Muthu

I tried every way with every possible way with every permutation combination but it doesn’t fulfill my requirement and that is what I said in the beginning too.

Anyways, thanks for your help.

Regards
Ruchin Sharma

[federico_calvo]

Hi, the same issue here. Any solution @ruchin78?

thanks!

[anandhuded2]

@ruchin78, @federico_calvo

Try the following code this should work.

<div id="header-html" class="hidden-pdf">
    <div id="variables" style="display:none;">
        <span id="margin-top">1mm</span>
    <span id="margin-left">5mm</span>
    <span id="margin-right">5mm</span>
    <span id="margin-bottom">0mm</span>
    </div>   
</div>

[Nikesh_Bhansali]

Remove PDF padding / margin

i have finally solved it . The css does take styles while exporting to pdf but erpnext seems to be caching and making html and css files of its own , due to which you cannot see changes instantly . so after every css change you make . just run the following commands and then see the output. Edit this file /home/user/erpnext/apps/frappe/frappe/utils/pdf.py edit lines 66,67,139,142 put values 0mm. the run the following code one by one bench clear-cache bench clear-website-cache bench build …

[vinhnguyent090]

It’s really work. thank you so much.

[federico_calvo]

Hi @anandhuded2 and @vinhnguyent090, could either of you show me a complete example of a pdf with this code working? Since I can’t find out what my mistake is.

Thank you!

[vinhnguyent090]

Hi

print html file I add end of file.
example file of my app:

vinhnguyent090/vnerp/blob/master/vnerp/vnerp/print_format/tax_report_gtgt01/tax_report_gtgt01.html

<div id="header-html" class="hidden-pdf">
    <div id="variables" style="display:none;">
        <span id="margin-top">7mm</span>
    	<span id="margin-left">0mm</span>
    	<span id="margin-right">0mm</span>
    	<span id="margin-bottom">7mm</span>
    </div>
</div>