Creating PDF document from HTML element consisting of only SVG's

Question

I'm trying to add a function that will enable users to download a PDF of generated barcodes. My obstacle is that JsBarcode creates SVG elements, and JSPDF does not seem to allow SVG's.

What I need is to create an A4 sized .pdf document upon a "click" event, with data from a div element consisting of 1 to unlimited SVG's. The sizes of the SVG's are determined by the user, and also the amount of SVG's.

Exactly how this (www.sejda.com) website outputs this sample code: (pastebin)

Typical SVG (child of div):

<svg id="" width="916px" height="322px" x="0px" y="0px" viewBox="0 0 916 322" xmlns="http://www.w3.org/2000/svg" version="1.1" style="transform: translate(0,0)"><rect x="0" y="0" width="916" height="322" style="fill:#ffffff;"></rect><g transform="translate(10, 10)" style="fill:#000000;"><rect x="0" y="0" width="16" height="250"></rect><rect x="24" y="0" width="8" height="250"></rect><rect x="48" y="0" width="24" height="250"></rect><rect x="88" y="0" width="16" height="250"></rect><rect x="128" y="0" width="8" height="250"></rect><rect x="144" y="0" width="24" height="250"></rect><rect x="176" y="0" width="24" height="250"></rect><rect x="208" y="0" width="8" height="250"></rect><rect x="224" y="0" width="32" height="250"></rect><rect x="264" y="0" width="8" height="250"></rect><rect x="288" y="0" width="16" height="250"></rect><rect x="312" y="0" width="24" height="250"></rect><rect x="352" y="0" width="8" height="250"></rect><rect x="376" y="0" width="24" height="250"></rect><rect x="408" y="0" width="16" height="250"></rect><rect x="440" y="0" width="8" height="250"></rect><rect x="464" y="0" width="24" height="250"></rect><rect x="504" y="0" width="16" height="250"></rect><rect x="528" y="0" width="8" height="250"></rect><rect x="552" y="0" width="16" height="250"></rect><rect x="576" y="0" width="24" height="250"></rect><rect x="616" y="0" width="8" height="250"></rect><rect x="640" y="0" width="24" height="250"></rect><rect x="680" y="0" width="16" height="250"></rect><rect x="704" y="0" width="16" height="250"></rect><rect x="728" y="0" width="24" height="250"></rect><rect x="768" y="0" width="8" height="250"></rect><rect x="792" y="0" width="16" height="250"></rect><rect x="832" y="0" width="24" height="250"></rect><rect x="864" y="0" width="8" height="250"></rect><rect x="880" y="0" width="16" height="250"></rect><text style="font:bold 50px arial" text-anchor="middle" x="448" y="302">50-01-1</text></g></svg>

Thanks for your time!

Answer 1

A quick google would show you that it is quite easy. You just need to convert the svg into a png with "saveSvgAsPng"

More info here