python - 如何将条形码渲染格式的字符串转换为 html

Question

我正在使用 barcode 模块生成一个 .svg 条形码文件。

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

当我使用 - package_no_barcode.render 时，我得到 -

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'

如何转换此字符串以获取 html svg 图像？

Answer 1

字符串是 svg 图像。 您只需将字符串附加到 DOM 中，您就会看到您的 svg。

参见:https://jsfiddle.net/o2kyqxve/1/

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg\r\n PUBLIC \'-//W3C//DTD SVG 1.1//EN\'\r\n
\'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\'><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"> <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> </g></svg>