CSS for PDF printing

Frappe Framework Print Formats
1

What CSS is the PDF print using?
it doesnt seem to be the same as for HTML

this is how it should look like:

htmlcss.PNG751×441 7.32 KB

but this gets rendered as pdf
pdfcss.PNG744×422 9.55 KB

so the document status is black rather then red and the Taxsection doesnt pick up the format and keeps this ugly line break

any ideas where I can find the settings for this?

2

I am having a similar behavior. PDF and print results are much different than the preview. I would appreciate any feedback too…

3

Same here!
It seems that the css part get removed for most sections.
Would appreciate if anyone can help in this aspect. i.e. if we have to add in more files in.

4

@jlsy & @spa & @liberostelios am surprised no one answered this and there is no feedback at all…

but in any way my response is:

ERPNext / Frappe dose not control the CSS…

in order to format / style your PDF you have to use the rules of wkhtmltopdf rules in which they say what css properties they use and which ones they dont because its different than anything else as its not HTML…

5

I have the same problem.
How do other companies handle this issue?
Are there any good guides on how to properly set up our corporate identity?
The documentation on the wkhtmltopdf website is not really useful.
Wouldn’t a technology like ReportLab be more useful?

2 Likes
6

Thought I’d revive this, since I was having the same problem and found this to work for me. Note this is for people hosting erpnext.

I read about the frappe provided fonts here, but instead just installed fonts using this and that fixed my font-family issues.

$ sudo apt-get install ttf-mscorefonts-installer

To fix font colors, you have to modify the bootstrap.css located at
frappe/frappe/public/css/bootstrap.css

Find the following and modify the after section. I removed the line about color.

@media print {
  *,
  *:before,
  *:after {
    color: #000 !important;
    text-shadow: none !important;
    background: transparent !important;
    -webkit-box-shadow: none !important;
            box-shadow: none !important;
  }

Hope this helps. Tested on 6.27.

4 Likes