2

i am going to add image in pdf file using flask. when i add img tag in my html code, it won't appear. how can i add image in my pdf?

i found something like to convert in base64, but i don't know how to do it in python.

below is my flask route code.

@app.route('/pdf')  
def pdf_template():  
        rendered = render_template('pdf_template.html')
        css = ['main.css']
        pdf = pdfkit.from_string(rendered,False,css=css)
        response = make_response(pdf)
        response.headers['Content-Type'] = 'application/pdf'
        response.headers['Content-Disposition'] = 'inline; filename=output.pdf'
        return response

here is my pdf_html file

<!DOCTYPE html>

    <html lang="en" dir="ltr">
      <head>
        <meta charset="utf-8">
        <title></title>
      </head>
      <body>
          <h1>QUOTATION</h1>
                  <table class="table table-bordered" width='375'>
                    <tr>
                      <th>Address</th>
                      <td>pakistan</td>
                    </tr>
                    <tr>
                      <th>Tel</th>
                      <td>0213123456</td>
                    </tr>
                    <tr>
                      <th>Mobile</th>
                      <td>03211234567</td>
                    </tr>
                    <tr>
                      <th>Email</th>
                      <td>demo@demo.com</td>
                    </tr>
                    <tr>
                      <th>Website</th>
                      <td>www.example.com</td>
                    </tr>
                  </table>

                <img src="static/logo.jpg" alt="" width="150" height="150">

                  <br>
                  <p class="solid" bgcolor="FFFFFF">Quote To</p>
                  <br>
                  <div>
                  <table class="table table-bordered">
                    <tbody>
                      <tr>
                        <th>OUR REF</th>
                        <td>{{query1.ourref}}</td>
                        <th>TO</th>
                        <td>{{query1.to}}</td>
                      </tr>
                      <tr>
                        <th>DATE</th>
                        <td>{{query1.date}}</td>
                        <th>ATTN</th>
                        <td>{{query1.attn}}</td>
                      </tr>
                      <tr>
                        <th>FROM</th>
                        <td>{{query1.fromq}}</td>
                        <th>EMAIL/FAX</th>
                        <td>{{query1.emailfax}}</td>
                      </tr>
                      <tr>
                        <th>PRC BASIS</th>
                        <td>{{query1.prcbasis}}</td>
                        <th>YR REF</th>
                        <td>{{query1.yrref}}</td>
                      </tr>
                      <tr>
                        <th>LEAD TIME</th>
                        <td>{{query1.leadtime}}</td>
                        <th>VALIDITY</th>
                        <td>{{query1.validity}}</td>
                      </tr>
                      <tr>
                        <th>PAYMENT</th>
                        <td>{{query1.payment}}</td>
                        <th>REMARKS</th>
                        <td>{{query1.remarks}}</td>
                      </tr>
                    </tbody>
                  </table>

                </div>
                <br>

                  <table id="itemtable" width="925" id="particular" border="1px solid black" >
                    <thead>
                      <tr bgcolor="#FF0000">
                        <th ><font color="#fff">NO</th>
                        <th><font color="#fff">PART NAME</th>
                        <th><font color="#fff">QTY</th>
                        <th><font color="#fff">U/PRICE</th>
                        <th><font color="#fff">AMOUNT in RS.</th>
                      </tr>
                    </thead>
                    <tbody>

                      {% for items in query %}
                      <tr height="88px" >
                        <td width="2"0 style="border-top:none; border-bottom:none;">{{items.id}}</td>
                        <td width="400" style="border-top:none; border-bottom:none;">{{items.itemname}}</td>
                        <td style="text-align:center; border-top:none; border-bottom:none;" width="100">{{items.qty}}</td>
                        <td style="text-align:center; border-top:none; border-bottom:none;" width="100">{{items.price}}</td>
                        <td style="text-align:center; border-top:none; border-bottom:none;" width="150">{{items.qty * items.price}}</td>
                      </tr>

                      {% endfor %}

                      {% for i in range(8 - count) %}
                      <tr height="95px">
                        <td width=20></td>
                        <td width=400></td>
                        <td style="text-align:center;" width="100"></td>
                        <td style="text-align:center;" width="100"></td>
                        <td style="text-align:center;" width="150"></td>
                      </tr>
                      {% endfor %}
                    </tbody>
                    <tfoot>
                      <tr bgcolor="#FF0000">
                        <td style="text-align:center;"></td>
                        <td style="text-align:right;"colspan="3"><font color="#fff">TOTAL PAK RUPEE.</td>
                        <td style="text-align:center;" ><font color="#fff">6250</td>
                      </tr>
                    </tfoot>
                  </table>
                  <p>17%GST EXTRA</p>
                  <p>PARTIAL ORDER SUBJECT TO OUR CONFIRMATION</p>
                  <p>THE PRICE MAY CHANGE, IF THE US DOLLAR CONVERSION RATE FLUCTUATES.</p>

                  <h4 style="float:right;"> <small>For </small>HAMZA ENTERPRISES </h4>

              </div>
              </div>
            </div>

            </div>
          </div>

      </body>
    </html>  

the pdf is something like this

pdf generated

James Z
  • 12,209
  • 10
  • 24
  • 44
Hamza Awan
  • 99
  • 1
  • 3
  • 9

1 Answers1

2

Put below image tag in desired location in your HTML.

If you want to be consistent of your image size, I highly recommend putting below image tag into a table structure.

For converting image to base 64, try https://www.base64-image.de/

 <img src="data:image/jpeg;base64,asa43asdf............."> 
Jessi
  • 1,378
  • 6
  • 17
  • 37
  • When I convert an image to base64 and put it in the template, it does not get rendered and an error is thrown. My python code is exactly the same as highlighted by @HamzaAman Error is thrown on line: pdf = pdfkit.from_string(rendered,False,css=css) Do you know what additional configuration is required so that base64 image is rendered without any issues? Thank you. – LinuxUser May 13 '20 at 23:52