How to define Left and Right Margin for PDF and Print

ruchin78 · August 22, 2016, 5:00am

Hi Everyone,

I have designed a Print Format but still I am unable to define left and right margin for PDF and Print.

Whatever Margin I see in the Preview it get removed at the time of Print as well as PDF.

Any help in this context will be appreciated.

Regards
Ruchin Sharma

Muthu · August 22, 2016, 5:15am

Hi @ruchin78 ,

Adding this worked for me , I am not sure please try ,

Add this in the css of your custom print format

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

}

Thanks

ruchin78 · August 22, 2016, 5:16am

@Muthu
I tried but it is still not working.

Regards
Ruchin Sharma

fasilkaks · August 22, 2016, 10:06am

Hi,

How could we reduce the left and right margin? +1

KR,
Fasil

ruchin78 · August 22, 2016, 10:21am

@fasilkaks

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

The above code works very well for preview and print and you can use this code by changing according you your requirement and put this code in CSS Section.
But the only issue is it doesn’t work when it generates PDF.

Regards
Ruchin Sharma

fasilkaks · August 22, 2016, 10:24am

Hi Ruchin,

Thanks for the quick response!

Margin for the PDF is what I am looking for. We send documents only in PDF form. The default margin is little more than what I need. This is to get maximum space for the item table.

KR,
Fasil.

ruchin78 · August 22, 2016, 10:54am

@fasilkaks
I am also looking for the same, I tried so many different CSS for the same but I didn’t get any solution though.

Regards
Ruchin Sharma

fasilkaks · August 23, 2016, 1:53pm

Hi frappe,

I think wkhtmltopdf puts a default margin. If this is true, do we have any work around?

KR,
Fasil

cpurbaugh · August 23, 2016, 3:14pm

I don’t know if this will help anyone, but here’s a list of wkhtmltopdf commands:

http://wkhtmltopdf.org/usage/wkhtmltopdf.txt

ruchin78 · August 23, 2016, 3:32pm

Hi @cpurbaugh
Thanks for your reply.
Actually, I have already seen this but don’t know how to use it. Do you have any idea about this?

cpurbaugh · August 23, 2016, 3:36pm

Not at all. I just stumbled on it and figured someone else might know what to do with it. But at least you know the default margins are 10mm.

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 ?