xhtml2pdf Pisa css broken none functional

3,003 views
Skip to first unread message

John Chin

unread,
Jun 20, 2015, 3:53:04 PM6/20/15
to xhtm...@googlegroups.com

I am trying to generate a PDF using html+css using xhtml2pdf.pisa using Django. However, I'm running into all sorts of weird issues with the CSS.

Below is my code:

from django.template.loader import render_to_string
import cStringIO as StringIO
import xhtml2pdf.pisa as pisa
import cgi, os
def fetch_resources(uri, rel):
    path = os.path.join(settings.STATIC_ROOT, uri.replace(settings.STATIC_URL, ""))
    return path
def test_pdf(request):
    html = render_to_string('pdf/quote_sheet.html', { 'pagesize':'A4', }, context_instance=RequestContext(request))
    result = StringIO.StringIO()
    pdf = pisa.pisaDocument(StringIO.StringIO(html.encode("UTF-8")), dest=result, link_callback=fetch_resources)
    if not pdf.err:
        return HttpResponse(result.getvalue(), mimetype='application/pdf')
    return HttpResponse('Gremlins ate your pdf! %s' % cgi.escape(html))

And my template:

<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    {% load static from staticfiles %}
    {% load i18n %}
    <meta charset="utf-8"/>
    <meta http-equiv="content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="content-language" content='{% trans "g_locale2" %}'/>
    <title>{% block title %}{% endblock %}</title>
    <style type="text/css">
        @page {
            size: A4;
            margin: 1cm;
            @frame footer {
                -pdf-frame-content: footerContent;
                bottom: 0cm;
                margin-left: 9cm;
                margin-right: 9cm;
                height: 1cm;
                font-family: "Microsoft JhengHei";
            }
        }
        @font-face {
            font-family: "Microsoft JhengHei";
            src:url('{% static "ttf/msjh.ttf" %}');
        }
        @font-face {
            font-family: "Microsoft JhengHei";
            src:url('{% static "ttf/msjhbd.ttf" %}');
        }
        @font-face {
            font-family: "Helvetica";
            src:url('{% static "ttf/Helvetica_Reg.ttf" %}');
        }
        table.styled-table tr th {
            color: gray;
            background-color: blue;
            font-size: 14px;
            font-family:"Microsoft JhengHei";
            border: 1px solid black;
        }
    </style>
    <link rel="stylesheet" href='{% static "css/pdf.css" %}'/>
</head>
<body>
    <div id="main-content">
        <div class="container">
            <div class="table-div">
                <table class="styled-table">
                    <tr class="row_header">
                        <th class="col_order">{% trans "g_item_num" %}</th>
                        <th class="col_name">{% trans "g_item_name" %}</th>
                        <th class="col_provider">{% trans "g_provider_name" %}</th>
                        <th class="col_budget_quantity">{% trans "g_quantity" %}</th>
                        <th class="col_price">{% trans "g_item_price" %}</th>
                        <th class="col_total_price">{% trans "g_item_total" %}</th>
                    </tr>
                </table>
           </div>
        </div>
    </div>
</body>
</html>

My code is pretty basic and nothing special, they are just pretty much copied verbatim from the web. I'm running into lots of weird issues:

  1. font-size, background-color works in external css, but only when applied on body or html tag.
  2. width, line-height etc does not work whatsoever, no matter external, internal, or inlined.
  3. margin-bottom on a parent div gets applied to every single child div instead of the parent div...
  4. all sorts of other random issues...

I cannot observe a pattern from these symptoms other than just thinking the css parser and layout engine is just totally incomplete and non-functional. However I cannot find anyone online who has the same issues as me. Am I crazy? I'm not sure what is happening here... any help would be appreciated.

Matt S

unread,
Jul 20, 2015, 10:05:00 PM7/20/15
to xhtm...@googlegroups.com
I tried your template, which appears to just be one table row, and it looked find to me.

But any struggles you're having are par for the course with this lib. I've some had success with these 2 options:

1) Hacking away at the CSS until things layout correctly. Table cell heights are extra annoying and I've had to set any table-related element to display: inline explicitly as xhtml2pdf can't render "block" in any reliable way. It's best to realize you're basically dealing with home-grown HTML layout that attempts to flow/break across PDF pages.

2) Tracing through the source code to try to find bugs. Fix any I find and contribute fixes to the lib. I run off of my fork of the code.

Randy Ostler

unread,
Apr 19, 2016, 10:21:56 AM4/19/16
to Pisa XHTML2PDF Support
John,

I'm having similar issues.  Just trying to add some CSS directives to control the header sizes seems to be failing miserably.

Have you made any progress on this?

I'm still using 0.0.6 - for some reason I'm prevented from upgrading.  My IDE seems to be holding me back.  I can't figure out what is limiting me from going to the latest version.

John Chin

unread,
Apr 19, 2016, 10:35:29 AM4/19/16
to xhtm...@googlegroups.com

Yes, I ended up ditching Pisa all together and went with nodejs's phantomPDF instead. Ha

--
You received this message because you are subscribed to a topic in the Google Groups "Pisa XHTML2PDF Support" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/xhtml2pdf/vSqU0U6vXCc/unsubscribe.
To unsubscribe from this group and all its topics, send an email to xhtml2pdf+...@googlegroups.com.
To post to this group, send email to xhtm...@googlegroups.com.
Visit this group at https://groups.google.com/group/xhtml2pdf.

For more options, visit https://groups.google.com/d/optout.
Reply all
Reply to author
Forward
0 new messages