HOW TO: Manipulate Margins in PDF Files

aliriocastro · March 6, 2020, 4:34pm

Hello,

I want to share how I could define margin for PDF Files. This workaround works for Cloud and On-Premises instances.

First, you may can take a look to the pdf.py file in GitHub (Frappe Repo).

frappe/frappe/blob/3789ffd03ac1eb030782c52598d4cdddf532f7e4/frappe/utils/pdf.py#L130


      
          
          
def read_options_from_html(html):
          	options = {}
          	soup = BeautifulSoup(html, "html5lib")
          
          
	options.update(prepare_header_footer(soup))
          
          
	toggle_visible_pdf(soup)
          
          
	# use regex instead of soup-parser
          	for attr in ("margin-top", "margin-bottom", "margin-left", "margin-right", "page-size", "header-spacing"):
          		try:
          			pattern = re.compile(r"(\.print-format)([\S|\s][^}]*?)(" + str(attr) + r":)(.+)(mm;)")
          			match = pattern.findall(html)
          			if match:
          				options[attr] = str(match[-1][3]).strip()
          		except:
          			pass
          
          
	return soup.prettify(), options

This method looks for a CSS class .print-format and its attribute but ONLY in mm. However, ERPNext could cache the .css file making impossible to see changes immediately after we save. To solve this, we have to add a <style></style> tag in the Custom Report (or Predefined) changing this attributes. i.e.

<style>
    .print-format {
    font-family: 'Open Sans', sans-serif;
        margin-left:0mm;
        margin-top:0mm;
        margin-right:0mm;
        margin-bottom:0mm;
}
</style>

After this, you will get your PDF file with no margin.

Good Luck!

Alirio.

tonto · March 8, 2020, 6:24pm

Thank you. Did you find a table or chart indicating each of the elements so others can be adjusted? For example want to make terms font size smaller and was working before, but now neither:

[data-fieldname=“terms”].value { font-size:40%; }
[data-fieldname=“terms”] { font-size:40%; }
.[data-fieldname=“terms”].value { font-size:40%; }
.[data-fieldname=“terms”] { font-size:40%; }

Trying other measurements such as 9px does not work either

aliriocastro · March 8, 2020, 9:27pm

This is only for PDF specific settings such as margin or page size.

You can adjust with this class:

margin-top
margin-bottom
margin-left
margin-right
page-size
header-spacing

It’s mandatory you specify all measures in mm.

You may want to open your own post so other users could help you with your issue. If you send full HTML will be better.

Alirio.

aakvatech · January 8, 2021, 10:34am

Thank if work for me but in my situation it removed the letter head

picani · January 8, 2021, 11:21am

Hi

I had the same problem. I fixed it by not changing the margin-top in .print-format and putting the letter head in a div like the following:

<div id="header-html" class="visible-pdf">
  <div style="margin-top: -15mm;">
    {{ letter_head }}
  </div>
</div>

Of course, change -15mm by the value you actually want. Here, -15mm cancels the default 15mm, so it ends up being a 0mm top margin.

zhangithub88 · August 6, 2021, 3:13am

@picani, I am currently facing the issue of removed letter head, may I know where should I add your code?

yasserelbana · July 2, 2022, 12:33pm

did any one find solution for removed letter head?

Krishn · January 25, 2024, 11:57am

Hello @aliriocastro , I want to make the header (thead) and footer (tfoot) repeat, which works well when printing. However, in the PDF, the header and footer don’t repeat as they should.