convert image in base64 in flask to Adding in PDF











up vote
2
down vote

favorite












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










share|improve this question




























    up vote
    2
    down vote

    favorite












    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










    share|improve this question


























      up vote
      2
      down vote

      favorite









      up vote
      2
      down vote

      favorite











      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










      share|improve this question















      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







      python-3.x flask base64 python-pdfkit






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Nov 7 at 15:15









      James Z

      11.1k71735




      11.1k71735










      asked Nov 7 at 14:02









      Hamza Awan

      123




      123
























          1 Answer
          1






          active

          oldest

          votes

















          up vote
          0
          down vote













          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............."> 








          share|improve this answer





















            Your Answer






            StackExchange.ifUsing("editor", function () {
            StackExchange.using("externalEditor", function () {
            StackExchange.using("snippets", function () {
            StackExchange.snippets.init();
            });
            });
            }, "code-snippets");

            StackExchange.ready(function() {
            var channelOptions = {
            tags: "".split(" "),
            id: "1"
            };
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function() {
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled) {
            StackExchange.using("snippets", function() {
            createEditor();
            });
            }
            else {
            createEditor();
            }
            });

            function createEditor() {
            StackExchange.prepareEditor({
            heartbeatType: 'answer',
            convertImagesToLinks: true,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: 10,
            bindNavPrevention: true,
            postfix: "",
            imageUploader: {
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            },
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            });


            }
            });














             

            draft saved


            draft discarded


















            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53191016%2fconvert-image-in-base64-in-flask-to-adding-in-pdf%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown

























            1 Answer
            1






            active

            oldest

            votes








            1 Answer
            1






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes








            up vote
            0
            down vote













            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............."> 








            share|improve this answer

























              up vote
              0
              down vote













              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............."> 








              share|improve this answer























                up vote
                0
                down vote










                up vote
                0
                down vote









                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............."> 








                share|improve this answer












                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............."> 








                 <img src="data:image/jpeg;base64,asa43asdf............."> 





                 <img src="data:image/jpeg;base64,asa43asdf............."> 






                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Nov 7 at 22:46









                Jessi

                288619




                288619






























                     

                    draft saved


                    draft discarded



















































                     


                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function () {
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53191016%2fconvert-image-in-base64-in-flask-to-adding-in-pdf%23new-answer', 'question_page');
                    }
                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    這個網誌中的熱門文章

                    Xamarin.form Move up view when keyboard appear

                    Post-Redirect-Get with Spring WebFlux and Thymeleaf

                    Anylogic : not able to use stopDelay()