How to define Left and Right Margin for PDF and Print

jkeersmaekers · August 23, 2016, 5:20pm

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 · August 23, 2016, 5:31pm

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

github.com

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

# Copyright (c) 2015, Frappe Technologies Pvt. Ltd. and Contributors
# License: MIT. See LICENSE
import io
import os
import re
import subprocess
from distutils.version import LooseVersion

import pdfkit
from bs4 import BeautifulSoup
from PyPDF2 import PdfReader, PdfWriter

import frappe
from frappe import _
from frappe.utils import scrub_urls
from frappe.utils.jinja_globals import bundled_asset, is_rtl

PDF_CONTENT_ERRORS = [
	"ContentNotFoundError",
	"ContentOperationNotPermittedError",

This file has been truncated. show original

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 · August 23, 2016, 6:58pm

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 · August 23, 2016, 7:00pm

@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 · August 23, 2016, 7:02pm

@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 · August 23, 2016, 7:05pm

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

Then you may need to follow these instructions:

Regards
Ruchin Sharma

Muthu · August 24, 2016, 2:47am

@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 · August 24, 2016, 3:19am

@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 · August 24, 2016, 3:40am

@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 · August 24, 2016, 6:41am

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 · August 24, 2016, 7:31am

Hi @ruchin78

Set left margin to 12mm and check

Thanks

ruchin78 · August 24, 2016, 8:21am

@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 · August 24, 2016, 8:25am

@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 · August 24, 2016, 8:28am

@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 · August 25, 2017, 4:53pm

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

thanks!

anandhuded2 · September 2, 2017, 4:15pm

@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 · September 2, 2017, 8:09pm

vinhnguyent090 · September 19, 2017, 2:47pm

It’s really work. thank you so much.

federico_calvo · January 2, 2018, 3:46pm

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 · January 2, 2018, 4:04pm

Hi

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

github.com

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

{%- from "templates/print_formats/standard_macros.html" import add_header -%}


{% if doc.period_type == "Quarter" %}
	{% set text01 = _("Quy {0} {1}").format(doc.period_num, doc.year) %}
{% endif %}
{% if doc.period_type == "Month" %}
	{% set text01 = _("Thang {0} {1}").format(doc.period_num, doc.year) %}
{% endif %}

{% if doc.first_time == 1 %}
	{% set text02 = "X" %}
{% endif %}

{% if doc.update_version > 0 %}
	{% set text03 = doc.update_version %}
{% endif %}

{% set text05 = doc.text05 %}
{% set text13 = "" %}

This file has been truncated. show original

<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>