0

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();
}
Dwyran
  • 45
  • 5

1 Answers1

0

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.

Pavel Gatnar
  • 3,987
  • 2
  • 19
  • 29
  • see http://stackoverflow.com/questions/28226677/save-inline-svg-as-jpeg-png-svg?rq=1 and http://stackoverflow.com/questions/23681325/convert-canvas-to-pdf-using-pdf-js – Pavel Gatnar Apr 22 '15 at 11:03
  • The 1st link is really huge JS. It seems to do something very similar to my JS but in a round-about way. The second link doesn't include SVG at all, leave alone pattern. And both use **canvas**. Could I do it without it? As I'm not as far from the answer. My JS actually works and saves as PDF, just doesn't open after. But thanks for answering@pavel – Dwyran Apr 23 '15 at 09:44