将SVG模式另存为PDF和PNG

Question

I've got a flowery pattern ( http://pages.bangor.ac.uk/~abp4d9/ ) where user moves sliders (for inner circles and petals) and flowers change. I've got 3 'Save as' buttons. 1st one (SVG) works great. The other 2 work only half-way. The saved file comes up in the appropriate format but then it doesn't open, saying that there was an error. All 3 JS functions are almost identical – I basically copied them from the working 1st function. I'm not sure what to correct – probably 'new Blob' format, but I'm not sure what to put instead. So, to sum up: • How to get a working 'Save as SVG' button to do the same with PDF and PNG? Here is my JS for half-working PDF button:

function downloadPdf(){
var svg = document.getElementsByTagName("svg")[0];
var svg_xml = (new XMLSerializer).serializeToString(svg);
var blob = new Blob([svg_xml]);
var url = window.URL || window.webkitURL;
var blobURL = url.createObjectURL(blob);
var a = document.createElement('a');
a.download = "Pattern.pdf";
a.href = blobURL;
document.body.appendChild(a);
a.click();
}

Answer 1

you have to create the PNG resp. PDF first. for PNG you can use canvas to draw the image and then retrieve the canvas content as PNG (or you can use a library). for PDF you have to use a library.