Generate pdf from html using xhtml2pdf in django project

Question

I am trying to generate pdf from html template in a django project using xhtml2pdf. Everything is working fine but bootstrap is not working. I am following this tutorial https://www.codingforentrepreneurs.com/blog/html-template-to-pdf-in-django/

Views.py

def generate_pdf(request, inflow_id):
    template = 'cashflow/invoice2.html'
    inflow = get_object_or_404(Inflow, pk=inflow_id)
    context = {
        "invoice_id": inflow.id,
        "customer_name": inflow.student,
        "amount": inflow.amount,
        "today": inflow.time,
        "fee_type": inflow.fee_type,
    }
    pdf = render_to_pdf(template, context)
    if pdf:
        response = HttpResponse(pdf, content_type='application/pdf')
        filename = "Invoice_%s.pdf" % inflow.student
        content = "inline; filename='%s'" % filename
        download = request.GET.get("download")
        if download:
            content = "attachment; filename='%s'" % filename
        response['Content-Disposition'] = content
        return response
    return HttpResponse("Not found")

render_to_pdf function in utils.py

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

invoice2.html file

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>duck</title>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-4 col-md-3">
                <div class="card" style="width: 24rem;">
                  <img class="card-img-top" src='https://cdn.bulbagarden.net/upload/thumb/0/0d/025Pikachu.png/250px-025Pikachu.png' alt="Card image cap">
                  <div class="card-body">
                    <p class="card-text">Please enter all the fee payments here.</p>
                  </div>
                </div>
            </div>
            <div>
            <h1>Invoice id: {{ invoice_id }}</h1>
            <h2>Customer name: {{ customer_name }}</h2>
            <h3>Amount: {{ amount }}</h3>
            <h4>Time: {{ today }}</h4>
            <h5>Fee Type: {{ fee_type }}</h5>
        </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="well col-xs-10 col-sm-10 col-md-6 col-xs-offset-1 col-sm-offset-1 col-md-offset-3">
                <div class="row">
                    <div class="col-xs-6 col-sm-6 col-md-6">
                        <address>
                            <strong>Elf Cafe</strong>
                            <br>
                            2135 Sunset Blvd
                            <br>
                            Los Angeles, CA 90026
                            <br>
                            <abbr title="Phone">P:</abbr> (213) 484-6829
                        </address>
                    </div>
                    <div class="col-xs-6 col-sm-6 col-md-6 text-right">
                        <p>
                            <em>Date: 1st November, 2013</em>
                        </p>
                        <p>
                            <em>Receipt #: 34522677W</em>
                        </p>
                    </div>
                </div>
                <div class="row">
                    <div class="text-center">
                        <h1>Receipt</h1>
                    </div>
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Product</th>
                                <th>#</th>
                                <th class="text-center">Price</th>
                                <th class="text-center">Total</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="col-md-9"><em>Baked Rodopa Sheep Feta</em></h4></td>
                                <td class="col-md-1" style="text-align: center"> 2 </td>
                                <td class="col-md-1 text-center">$13</td>
                                <td class="col-md-1 text-center">$26</td>
                            </tr>
                            <tr>
                                <td class="col-md-9"><em>Lebanese Cabbage Salad</em></h4></td>
                                <td class="col-md-1" style="text-align: center"> 1 </td>
                                <td class="col-md-1 text-center">$8</td>
                                <td class="col-md-1 text-center">$8</td>
                            </tr>
                            <tr>
                                <td class="col-md-9"><em>Baked Tart with Thyme and Garlic</em></h4></td>
                                <td class="col-md-1" style="text-align: center"> 3 </td>
                                <td class="col-md-1 text-center">$16</td>
                                <td class="col-md-1 text-center">$48</td>
                            </tr>
                            <tr>
                                <td>   </td>
                                <td>   </td>
                                <td class="text-right">
                                <p>
                                    <strong>Subtotal: </strong>
                                </p>
                                <p>
                                    <strong>Tax: </strong>
                                </p></td>
                                <td class="text-center">
                                <p>
                                    <strong>$6.94</strong>
                                </p>
                                <p>
                                    <strong>$6.94</strong>
                                </p></td>
                            </tr>
                            <tr>
                                <td>   </td>
                                <td>   </td>
                                <td class="text-right"><h4><strong>Total: </strong></h4></td>
                                <td class="text-center text-danger"><h4><strong>$31.53</strong></h4></td>
                            </tr>
                        </tbody>
                    </table>
                    <button type="button" class="btn btn-success btn-lg btn-block">
                        Pay Now   <span class="glyphicon glyphicon-chevron-right"></span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Please let me know what can I change here or use here to load bootstrap while generating pdf

m kiani · Accepted Answer · 2019-05-09 09:35:25Z

2

Because xhtml2pdf supports limited numbers of standard CSS properties.

Supported CSS properties by xhtml2pdf

edited May 9, 2019 at 9:35

answered May 9, 2019 at 9:28

m kiani

1378 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Cipher · Accepted Answer · 2019-03-15 10:56:53Z

It will not load the bootstrap inside your html. I had the same issue - Try to load static in your template - {% load static %}.

Here is the example where i have added styling in <style> tag.

{% load static %}
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Sales Report</title>
    <style type="text/css">
        @page {
            size: A4;
            margin: 1cm;
        }
        .table, td, th {  
        border-bottom: 1px solid #ddd;
        border-top: 1px solid #ddd;
        text-align: left;
        }

        .table {
        border-collapse: collapse;
        width: 100%;

        }

        .table th, td {
        padding: 5px;
        text-align: center;
        }

        .td{
        word-break: inherit;
        }

        .list-group h3{
            font-size: 3em;
        }
        .list-group p {
            font-size: 1em;
        }

        .table1 {
            width: 100%;
            max-width: 100%;
            margin-bottom: 5px;
            background-color: #fff;
            border: none;
            text-align: center;
        }

        .table1 td {
            border: none;
        }

    </style>
</head>
<body>

<div class="container">
    <div class="card">
        <table class="table1">
            <td><img src="https://professionalcipher.com/img/logos/django.png" alt="logo" /></td>
            <td>
                <div class="list-group">
                    <h3>Company Report</h3>
                    <p>Date - {% now "jS F Y H:i" %}</p>
                </div>
            </td>
        </table>
        <br/>
        <table class="table">
            <thead>
                <tr>
                  <th>
                    #
                  </th>
                  <th>
                    Company Name
                  </th>
                  <th>
                   Name
                  </th>
                  <th>
                    Email
                  </th>
                  <th>
                    Phone
                  </th>
                  <th>Status</th>
                  <th>Created Date </th>

                </tr>
              </thead>
              <tbody>
                {% for users in users %}
                <tr>
                  <td>
                      {{ forloop.counter }}
                  </td>
                  <td>
                    {{ users.userprofile.user_company }}

                 </td>

                  <td>
                        {{ users.first_name }} {{ users.last_name }}
                  </td>

                  <td>
                        {{ users.email }}

                  </td>
                  <td>{{ users.userprofile.user_phone }}</td>
                  <td>{{ users.userprofile.user_status }}</td>
                  <td>{{ users.userprofile.user_created |date:"M d, Y" }}</td>

                </tr>
                {% endfor %}
              </tbody>
        </table>
    </div>
</div>

</body>
</html>

Hope this will help you.

Not working in my case :( When I tried to render the template as a view it is working fine.

Collectives™ on Stack Overflow

Generate pdf from html using xhtml2pdf in django project

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related