CODEWITHSUNDEEP
djangodjango-formsdjango-templatesdjango-viewsreportlab
Steve Smith
Steve Smith

Reputation: 1089

How To Properly Display SVG image when converting HTML to PDF Using Reportlab

I have been playing with Reportlab and Django all day today, and I finally have it working with the help of this SO issue earlier today...https://stackoverflow.com/questions/54565679/how-to-incorporate-reportlab-with-django-class-based-view/54566002#= The output is now being produced as a PDF as expected. However, I can't get an image to display when the output is produced as a PDF. Nothing renders.

I have tried investigating my URLS, my absolute URLs in my settings.py file and nothing. I've noticed I can't get my template to pick up any of my static settings, yet the rest of my project is working fine with the same references. I also found this very similar SO issue, but can't seem to determine the actual fix....html template to pdf with images

My utils.py file...

from io import BytesIO
from django.http import HttpResponse
from django.template.loader import get_template

from xhtml2pdf import pisa

def render_to_pdf(template_src, context_dict={}):
    template = get_template(template_src)
    html  = template.render(context_dict)
    result = BytesIO()
    pdf = pisa.pisaDocument(BytesIO(html.encode("ISO-8859-1")), result)
    if not pdf.err:
        return HttpResponse(result.getvalue(), content_type='application/pdf')
    return None

My HTML template file...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>Title</title>
        <style type="text/css">
            body {
                font-weight: 200;
                font-size: 14px;
            }
            .header {
                font-size: 20px;
                font-weight: 100;
                text-align: center;
                color: #007cae;
            }
            .title {
                font-size: 22px;
                font-weight: 100;
               /* text-align: right;*/
               padding: 10px 20px 0px 20px;  
            }
            .title span {
                color: #007cae;
            }
            .details {
                padding: 10px 20px 0px 20px;
                text-align: left !important;
                /*margin-left: 40%;*/
            }
            .hrItem {
                border: none;
                height: 1px;
                /* Set the hr color */
                color: #333; /* old IE */
                background-color: #fff; /* Modern Browsers */
            }
        </style>
    </head>
    <body>
       <img class="logo3" src="/book/author.svg" >
        <div class='wrapper'>
            <div class='header'>
                <p class='title'>Invoice # </p>
            </div>
        <div>
        <div class='details'>
            Bill to: {{ customer_name }} <br/>
            Amount: {{ amount }} <br/>
            Date: 
            <hr class='hrItem' />
        </div>
    </div>
    </body>
</html>

And the view....

class SomeDetailView(DetailView):
    model = YourModel
    template_name = 'pdf/invoice.html'

    def get_context_data(self, **kwargs):
        context = super(SomeDetailView, self).get_context_data(**kwargs)
        # add extra context if needed
        return context

    def render_to_response(self, context, **kwargs):
        pdf = render_to_pdf(self.template_name, context)
        return HttpResponse(pdf, content_type='application/pdf')

I am trying to get the author.svg image to appear on the PDF but no luck as of yet.

Upvotes: 1

Views: 1509

Answers (1)

Steve Smith
Steve Smith

Reputation: 1089

After a bunch of trial and error I gave up on the SVG approach for now...and instead opted to use a PNG file. I found this SO that gave me the answer...django - pisa : adding images to PDF output was as simple as referencing the attribute in my model via the django template as shown below:

I include a default location in my model. I experimented with a PNG and an SVG. The PNG worked but the SVG did not. Either way this solves my issue.

Upvotes: 1

Related Questions