发表新帖
发表新帖

html template to pdf with images

前端 未结
关注
1 897
栀梦
栀梦 2021-01-17 06:51

I am using django and trying to render invoice pdf, pdf is generating successfully but images are not in pdf.

Actually I want to add barcode image, so I dynamically

相关标签:
1条回答
  • 离开以前
    2021-01-17 07:23

    To get the svg rendered in the html, you have to get the svg text as it is (text output) and put it in your template without using the <img> tag. 

    <body>
    <div class="container-fluid">
      <div class="row">
        <div class="col-6">
          <div class="row">
            <div class="col-12">
            <svg xmlns="http://www.w3.org/2000/svg" height="23.000mm" version="1.1" width="40.000mm">
    <!--Autogenerated with python-barcode 0.9.0-->
    <g id="barcode_group">
        <rect height="100%" style="fill:white" width="100%"/>
        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="2.540mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="2.940mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="3.140mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="3.340mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="3.740mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:white;" width="0.800mm" x="3.940mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="4.740mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="5.340mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="5.540mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="6.140mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="6.340mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="6.740mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="6.940mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="7.140mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="7.740mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="8.140mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="8.340mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="8.940mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="9.140mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="9.340mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="9.540mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="9.740mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="10.340mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="10.740mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="11.340mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="11.740mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="12.340mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="12.540mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="13.140mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="13.340mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="13.540mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="13.740mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="13.940mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="14.540mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:black;" width="0.800mm" x="14.740mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="15.540mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="15.740mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:white;" width="0.800mm" x="15.940mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="16.740mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="17.140mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="17.340mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="17.540mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="17.940mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="18.140mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="18.540mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:white;" width="0.800mm" x="18.740mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="19.540mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="19.940mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="20.140mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="20.340mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:black;" width="0.800mm" x="20.540mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="21.340mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="21.540mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="22.140mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="22.340mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="22.740mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="23.140mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="23.340mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="23.740mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="24.340mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="24.540mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="25.140mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="25.340mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="25.940mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="26.140mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="26.540mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="26.740mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="26.940mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="27.140mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="27.540mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="27.740mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="28.340mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="28.940mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="29.340mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="29.940mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="30.140mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="30.340mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="30.540mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="31.140mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="31.540mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="31.740mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="32.340mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="32.540mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="32.740mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="33.340mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="33.740mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="34.140mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="34.340mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="34.540mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:white;" width="0.400mm" x="35.140mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="35.540mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:white;" width="0.600mm" x="35.940mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:black;" width="0.600mm" x="36.540mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="37.140mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:black;" width="0.200mm" x="37.340mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:white;" width="0.200mm" x="37.540mm" y="1.000mm"/>
        <rect height="15.000mm" style="fill:black;" width="0.400mm" x="37.740mm" y="1.000mm"/>
        <text style="fill:black;font-size:10pt;text-anchor:middle;" x="20.340mm" y="21.000mm">PLAI73664PJHS</text>
    </g>
</svg>
            <span></span>
            </div>
          </div>
        </div>
      </div>
    </div>
 </body>

    In the snippet you see the html already rendered but you need to find the way of getting that text and pass it to the template as a context variable, like you are doing with package_no_barcode.

    EDIT

    I've made a test using jinja2 and using flask but the solution should be similar with django and its template engine.

    First, make sure you get the svg code as a string in your server code. Then, pass it to the template as a context variable as I mentioned before.

    In the template, you need to "evaluate" the html or in this case svg code that comes in the variable you passed before. To do that using jinja2, I used the safe filter.

    <body>
    <div class="container-fluid">
      <div class="row">
        <div class="col-6">
          <div class="row">
            <div class="col-12">
            {{ barcode | safe }}
            <span></span>
            </div>
          </div>
        </div>
      </div>
    </div>
 </body>

    And as a result I got:

    But using django's default template engine I think you need to use the escape builtin filter to get something similar.

    Similar question but using flask and jinja2: Passing HTML to template using Flask/Jinja2

    0 讨论(0)
 看不清?
提交回复
热议问题