将html模板转换为带有图像的pdf [英] html template to pdf with images

查看：114
本文介绍了将html模板转换为带有图像的pdf的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用django并尝试渲染pdf发票，pdf已成功生成，但是图像不在pdf中。

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

实际上我想添加条形码图像，所以我动态生成了 .svg 文件，但不知道如何将其放入pdf。

Actually I want to add barcode image, so I dynamically generated a .svg file, but don't know how to put it into pdf.

这是什么我在做.. 

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

html-

  <body>
    <div class="container-fluid">
      <div class="row">
        <div class="col-6">
          <div class="row">
            <div class="col-12">
              <span>
                {{ package_no_barcode }}
                <br>
                {{ package.package_no }}
                ....

视图- 

class GenerateInvoicePdf(View):
    def get(self, request, *args, **kwargs):
        package = Package.objects.get(package_no=request.GET.get('package'))
        address = package.purchase.order_product.delivery_location
        CODE128 = barcode.get_barcode_class('code128')
        package_no_barcode = CODE128(u'{pkg_no}'.format(pkg_no=package.package_no))
        if request.user.display_username == seller.display_username:
            data = {
                 'package':package,
                 'address':address,
                 'package_no_barcode':package_no_barcode,
             }
            pdf = render_to_pdf('pdf/invoice.html', data)
            if pdf:
                response = HttpResponse(pdf, content_type='application/pdf')
                filename = "Invoice_%s.pdf" %(package)
                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")

我也尝试了cid-< img src = cid：{{package_no_barcode}} alt = {{package.package_no}}>

生成的svg示例 

CODE128 = barcode.get_barcode_class('code128')
package_no_barcode = CODE128(u'PLAI73664PJHS')
package_no_barcode.save('PSKK')

生成svg-

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

更新-使用 .render ，-'package_no_barcode'：package_no_barcode.render ，我可以获取svg代码，但不适用于html-

Update - using .render, - 'package_no_barcode':package_no_barcode.render, i can get the svg code but not for html - 

b'<?xml version="1.0" encoding="UTF-8"?>\r\n<!DOCTYPE svg\r\n PUBLIC \'-//W3C//DTD SVG 1.1//EN\'\r\n
\'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\'>\r\n<svg height="23.000mm" version="1.1" width="38.000mm" xmlns="http://www.w3.org/2000/svg">\r\n
<!--Autogenerated with python-barcode 0.9.0-->\r\n <g id="barcode_group">\r\n <rect height="100%" style="fill:white" width="100%"/>\r\n <rect
height="15.000mm" style="fill:black;" width="0.400mm" x="2.540mm" y="1.000mm"/>\r\n <rect height="15.000mm" style="fill:white;" width="0.200mm"
x="2.940mm" y="1.000mm"/>\r\n <rect height="15.000mm" style="fill:black;" width="0.200mm" x="3.140mm" y="1.000mm"/>\r\n <rect height="15.000mm"
style="fill:white;" width="0.400mm" x="3.340mm" y="1.000mm"/>\r\n <rect height="15.000mm" style="fill:black;" width="0.200mm" x="3.740mm"
y="1.000mm"/>\r\n <rect height="15.000mm" style="fill:white;" width="0.800mm" x="3.940mm" y="1.000mm"/>\r\n <rect height="15.000mm" style="fill:black;"
width="0.400mm" x="4.740mm" y="1.000mm"/>\r\n <rect height="15.000mm" style="fill:white;" width="0.200mm" x="5.140mm" y="1.000mm"/>\r\n <rect
height="15.000mm" style="fill:black;" width="0.600mm" x="5.340mm" y="1.000mm"/>\r\n <rect height="15.000mm" style="fill:white;" width="0.200mm"
x="5.940mm" y="1.000mm"/>\r\n <rect height="15.000mm" style="fill:black;" width="0.600mm" x="6.140mm" y="1.000mm"/>\r\n <rect height="15.000mm"
style="fill:white;" width="0.200mm" x="6.740mm" y="1.000mm"/>\r\n <rect height="15.000mm" style="fill:black;" width="0.600mm" x="6.940mm"
y="1.000mm"/>\r\n <rect height="15.000mm" style="fill:white;" width="0.600mm" x="7.540mm" y="1.000mm"/>\r\n <rect height="15.000mm" style="fill:black;"
width="0.200mm" x="8.140mm" y="1.000mm"/>\r\n <rect height="15.000mm" style="fill:white;" width="0.200mm" x="8.340mm" y="1.000mm"/>\r\n <rect
height="15.000mm" style="fill:black;" width="0.400mm" x="8.540mm" y="1.000mm"/>\r\n <rect height="15.000mm" style="fill:white;" width="0.200mm"
x="8.940mm" y="1.000mm"/>\r\n <rect height="15.000mm" style="fill:black;" width="0.600mm" x="9.140mm" y="1.000mm"/>\r\n <rect height="15.000mm"
style="fill:white;" width="0.600mm" x="9.740mm" y="1.000mm"/>\r\n <rect height="15.000mm" style="fill:black;" width="0.200mm" x="10.340mm"
y="1.000mm"/>\r\n <rect height="15.000mm" style="fill:white;" width="0.200mm" x="10.540mm" y="1.000mm"/>\r\n <rect height="15.000mm" style="fill:black;"
width="0.400mm" x="10.740mm" y="1.000mm"/>\r\n <rect height="15.000mm" style="fill:white;" width="0.200mm" x="11.140mm" y="1.000mm"/>\r\n <rect
height="15.000mm" style="fill:black;" width="0.600mm" x="11.340mm" y="1.000mm"/>\r\n <rect height="15.000mm" style="fill:white;" width="0.200mm"
x="11.940mm" y="1.000mm"/>\r\n <rect height="15.000mm" style="fill:black;" width="0.200mm" x="12.140mm" y="1.000mm"/>\r\n <rect height="15.000mm"
style="fill:white;" width="0.600mm" x="12.340mm" y="1.000mm"/>\r\n <rect height="15.000mm" style="fill:black;" width="0.400mm" x="12.940mm"
y="1.000mm"/>\r\n <rect height="15.000mm" style="fill:white;" width="0.200mm" x="13.340mm" y="1.000mm"/>\r\n <rect height="15.000mm" style="fill:black;"
width="0.200mm" x="13.540mm" y="1.000mm"/>\r\n <rect height="15.000mm" style="fill:white;" width="0.600mm" x="13.740mm" y="1.000mm"/>\r\n <rect
height="15.000mm" style="fill:black;" width="0.400mm" x="14.340mm" y="1.000mm"/>\r\n <rect height="15.000mm" style="fill:white;" width="0.200mm"
x="14.740mm" y="1.000mm"/>\r\n <rect height="15.000mm" style="fill:black;" width="0.600mm" x="14.940mm" y="1.000mm"/>\r\n <rect height="15.000mm"
style="fill:white;" width="0.200mm" x="15.540mm" y="1.000mm"/>\r\n <rect height="15.000mm" style="fill:black;" width="0.600mm" x="15.740mm"
y="1.000mm"/>\r\n <rect height="15.000mm" style="fill:white;" width="0.400mm" x="16.340mm" y="1.000mm"/>\r\n <rect height="15.000mm" style="fill:black;"
width="0.200mm" x="16.740mm" y="1.000mm"/>\r\n <rect height="15.000mm" style="fill:white;" width="0.200mm" x="16.940mm" y="1.000mm"/>\r\n <rect
height="15.000mm" style="fill:black;" width="0.400mm" x="17.140mm" y="1.000mm"/>\r\n <rect height="15.000mm" style="fill:white;" width="0.400mm"
x="17.540mm" y="1.000mm"/>\r\n <rect height="15.000mm" style="fill:black;" width="0.400mm" x="17.940mm" y="1.000mm"/>\r\n <rect height="15.000mm"
style="fill:white;" width="0.400mm" x="18.340mm" y="1.000mm"/>\r\n <rect height="15.000mm" style="fill:black;" width="0.200mm" x="18.740mm"
y="1.000mm"/>\r\n <rect height="15.000mm" style="fill:white;" width="0.400mm" x="18.940mm" y="1.000mm"/>\r\n <rect height="15.000mm" style="fill:black;"
width="0.600mm" x="19.340mm" y="1.000mm"/>\r\n <rect height="15.000mm" style="fill:white;" width="0.200mm" x="19.940mm" y="1.000mm"/>\r\n <rect
height="15.000mm" style="fill:black;" width="0.400mm" x="20.140mm" y="1.000mm"/>\r\n <rect height="15.000mm" style="fill:white;" width="0.600mm"
x="20.540mm" y="1.000mm"/>\r\n <rect height="15.000mm" style="fill:black;" width="0.200mm" x="21.140mm" y="1.000mm"/>\r\n <rect height="15.000mm"
style="fill:white;" width="0.200mm" x="21.340mm" y="1.000mm"/>\r\n <rect height="15.000mm" style="fill:black;" width="0.200mm" x="21.540mm"
y="1.000mm"/>\r\n <rect height="15.000mm" style="fill:white;" width="0.600mm" x="21.740mm" y="1.000mm"/>\r\n <rect height="15.000mm" style="fill:black;"
width="0.600mm" x="22.340mm" y="1.000mm"/>\r\n <rect height="15.000mm" style="fill:white;" width="0.600mm" x="22.940mm" y="1.000mm"/>\r\n <rect
height="15.000mm" style="fill:black;" width="0.200mm" x="23.540mm" y="1.000mm"/>\r\n <rect height="15.000mm" style="fill:white;" width="0.200mm"
x="23.740mm" y="1.000mm"/>\r\n <rect height="15.000mm" style="fill:black;" width="0.400mm" x="23.940mm" y="1.000mm"/>\r\n <rect height="15.000mm"
style="fill:white;" width="0.200mm" x="24.340mm" y="1.000mm"/>\r\n <rect height="15.000mm" style="fill:black;" width="0.200mm" x="24.540mm"
y="1.000mm"/>\r\n <rect height="15.000mm" style="fill:white;" width="0.600mm" x="24.740mm" y="1.000mm"/>\r\n <rect height="15.000mm" style="fill:black;"
width="0.600mm" x="25.340mm" y="1.000mm"/>\r\n <rect height="15.000mm" style="fill:white;" width="0.200mm" x="25.940mm" y="1.000mm"/>\r\n <rect
height="15.000mm" style="fill:black;" width="0.400mm" x="26.140mm" y="1.000mm"/>\r\n <rect height="15.000mm" style="fill:white;" width="0.200mm"
x="26.540mm" y="1.000mm"/>\r\n <rect height="15.000mm" style="fill:black;" width="0.200mm" x="26.740mm" y="1.000mm"/>\r\n <rect height="15.000mm"
style="fill:white;" width="0.400mm" x="26.940mm" y="1.000mm"/>\r\n <rect height="15.000mm" style="fill:black;" width="0.600mm" x="27.340mm"
y="1.000mm"/>\r\n <rect height="15.000mm" style="fill:white;" width="0.200mm" x="27.940mm" y="1.000mm"/>\r\n <rect height="15.000mm" style="fill:black;"
width="0.400mm" x="28.140mm" y="1.000mm"/>\r\n <rect height="15.000mm" style="fill:white;" width="0.400mm" x="28.540mm" y="1.000mm"/>\r\n <rect
height="15.000mm" style="fill:black;" width="0.600mm" x="28.940mm" y="1.000mm"/>\r\n <rect height="15.000mm" style="fill:white;" width="0.200mm"
x="29.540mm" y="1.000mm"/>\r\n <rect height="15.000mm" style="fill:black;" width="0.200mm" x="29.740mm" y="1.000mm"/>\r\n <rect height="15.000mm"
style="fill:white;" width="0.400mm" x="29.940mm" y="1.000mm"/>\r\n <rect height="15.000mm" style="fill:black;" width="0.400mm" x="30.340mm"
y="1.000mm"/>\r\n <rect height="15.000mm" style="fill:white;" width="0.400mm" x="30.740mm" y="1.000mm"/>\r\n <rect height="15.000mm" style="fill:black;"
width="0.400mm" x="31.140mm" y="1.000mm"/>\r\n <rect height="15.000mm" style="fill:white;" width="0.600mm" x="31.540mm" y="1.000mm"/>\r\n <rect
height="15.000mm" style="fill:black;" width="0.200mm" x="32.140mm" y="1.000mm"/>\r\n <rect height="15.000mm" style="fill:white;" width="0.600mm"
x="32.340mm" y="1.000mm"/>\r\n <rect height="15.000mm" style="fill:black;" width="0.200mm" x="32.940mm" y="1.000mm"/>\r\n <rect height="15.000mm"
style="fill:white;" width="0.200mm" x="33.140mm" y="1.000mm"/>\r\n <rect height="15.000mm" style="fill:black;" width="0.400mm" x="33.340mm"
y="1.000mm"/>\r\n <rect height="15.000mm" style="fill:white;" width="0.600mm" x="33.740mm" y="1.000mm"/>\r\n <rect height="15.000mm" style="fill:black;"
width="0.600mm" x="34.340mm" y="1.000mm"/>\r\n <rect height="15.000mm" style="fill:white;" width="0.200mm" x="34.940mm" y="1.000mm"/>\r\n <rect
height="15.000mm" style="fill:black;" width="0.200mm" x="35.140mm" y="1.000mm"/>\r\n <rect height="15.000mm" style="fill:white;" width="0.200mm"
x="35.340mm" y="1.000mm"/>\r\n <rect height="15.000mm" style="fill:black;" width="0.400mm" x="35.540mm" y="1.000mm"/>\r\n <text
style="fill:black;font-size:10pt;text-anchor:middle;" x="19.240mm" y="21.000mm">UXXWL94HXO08</text>\r\n </g>\r\n</svg>\r\n'

如何使用此代码制作svg图像？

How to make svg image with this code ?

推荐答案

要获取以svg格式呈现的svg，您必须按原样获取svg文本（文本输出）并将其放入模板中，而无需使用< img> 标签。

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.

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.

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.

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.

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:

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.

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

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

这篇关于将html模板转换为带有图像的pdf的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
Python最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆