將html模板轉換為帶有圖像的pdf
[英]html template to pdf with images
問題描述
我正在使用django並嘗試呈現pdf發票，pdf成功生成，但是圖像不在pdf中。
實際上，我想添加條形碼圖像，因此我動態生成了.svg文件，但不知道如何將其放入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-
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圖像？
1 個解決方案
解決方案1
1 2019-01-18 20:49:30
要使svg在html中呈現，您必須按原樣獲取svg文本（文本輸出）並將其放入模板中，而不使用<img>標記。
<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>
在代碼段中，您已經看到了已渲染的html，但是您需要找到獲取該文本的方法，並將其作為上下文變量傳遞到模板，就像使用package_no_barcode 。
編輯
我已經使用jinja2和flask進行了測試，但是解決方案應該與django及其模板引擎相似。
首先，請確保在服務器代碼中以字符串形式獲取svg代碼。 然后，將其作為上下文變量傳遞到模板，就像我之前提到的那樣。
在模板中，您需要“評估”之前傳遞的變量中的html或本例中的svg代碼。 為了使用jinja2做到這一點，我使用了safe過濾器。
<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>
結果，我得到了：
但是我想使用django的默認模板引擎，您需要使用內置的轉義過濾器來獲得類似的東西。
類似的問題，但使用flask和jinja2： 使用Flask / Jinja2將HTML傳遞到模板
將圖像從 AWS 存儲桶媒體文件夾加載到 HTML pdf 模板
[英]Loading images from an AWS bucket media folder to a HTML pdf template
將HTML輸出導出為pdf或odt的適當模板系統是什么？
[英]What's the appropriate template system to export an HTML output as pdf or odt?
使用 Jinja2 在 template.html 中渲染圖像並在 PDF 中渲染 weasyprint
[英]Render image in template.html with Jinja2 and weasyprint in a PDF
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
如何將html模板（帶有圖像）轉換為pdf？
將圖像從 AWS 存儲桶媒體文件夾加載到 HTML pdf 模板
圖像未加載到 Flask 中的 HTML 模板上
Django：HTML模板無法轉換為PDF
pdf StringIO嵌入呈現的html燒瓶模板
將 Gmail 轉換為 PDF：在 HTML 中嵌入圖像
使用xhtml2pdf將html轉換為pdf，圖像不顯示
如何在Django HTML模板中查看圖像
將HTML輸出導出為pdf或odt的適當模板系統是什么？
使用 Jinja2 在 template.html 中渲染圖像並在 PDF 中渲染 weasyprint
相關標簽