1

I need to render a page to PDF file which includes Material icons but it doesn't seem to work.

templates/pdf.html

<html>
<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

  <style>
    * {
      font-family: Roboto, Helvetica, sans-serif;
    }
</style>
</head>
<body>
  Just test 
  <i class="material-icons">remove_red_eye</i>
</body>
</html>

gen.py

import pdfkit
from django.template.loader import render_to_string

html = render_to_string('pdf.html')
pdfkit.from_string(html, 'out.pdf')
# I tried this version but it doesn't work either
# pdfkit.from_string(html, 'out.pdf', css=['https://fonts.googleapis.com/icon?family=Material+Icons'])

out.pdf only contains the text Just test. Are there any chance to fix it?

I've just also created the issue in pdfkit repo - issue

Quy Tang
  • 3,929
  • 1
  • 31
  • 45
  • What does `html` look like? i mean like print(html) – johnashu Mar 10 '18 at 14:59
  • If you are using django.. try `django-easy-pdf`.. Have a look here(2nd answer)... let me know if it doesnt work and i will have a look but i think it will help you in this instance https://stackoverflow.com/questions/45233906/how-to-convert-a-html-document-into-a-pdf-using-report-lab-with-python – johnashu Mar 10 '18 at 16:39
  • It also encountered the same problem. I just figure out the way to get it works. Will add the answer below – Quy Tang Mar 12 '18 at 07:13

1 Answers1

3

There are 2 issues to solve and I got it done in an acceptable manner.

  1. Css.

    • Only inline styles work. External styles don't work.

    • Wkhtmltopdf supports -webkit- prefix, so that some css properties need to add the prefix to work properly.

    • download external css files if required. Use <style>{% include 'style.css' %}</style> in django template to seperate out the css files.

  2. Icon fonts and custom fonts do not work.

    • download required svg icons instead of using icon fonts.

    a. use {% include 'icon.svg' %} to include the font icons

    b. only path, fill element in svg xml are supported

    c. you can change the color and height of svg in the svg xml content.

    d. download svgs at Material Icon

    e. you can use pngs instead but it is not easy to change the icon color and size.

    • use system font or install the font manually inside the serving instance.
Quy Tang
  • 3,929
  • 1
  • 31
  • 45