Save div of svg to pdf

Question

When I save the div of svg to pdf it works fine but it does not show me the svg. Ive been struggling with this problem for 2 weeks is there anyone out there with a solution or any ideas or solutions

It should display like this

Instead it display like this when file is downloaded it does not show the svg

  document.getElementById("saveBtn").addEventListener("click", saveBtn);

                function saveBtn() {

                        html2canvas(document.getElementById("widget"), {
                            onrendered: function (canvas) {
                                var img = canvas.toDataURL("image/png");

                                var doc = new jsPDF();
                                doc.addImage(img, 'JPEG', 20, 20);
                                doc.save('test.pdf');
                            }
                        });
                    }

#canvas
{
display:none;
}

<div id="widget" class="collapsable open cell lg-1-3">Bars

<svg width="120" height="120" viewBox="0 0 120 120"
    xmlns="http://www.w3.org/2000/svg">
 
 <line x1="20" y1="100" x2="300" y2="100"
      stroke-width="10" stroke="green" />
   Yellow<line x1="20" y1="120" x2="300" y2="120"
      stroke-width="20" stroke="yellow" />
 
</svg>
<br><br>
<button id="saveBtn">Test<button>
 <canvas id="canvas">Test</canvas>

Would you consider using the browser's Print... request, then choose 'Save as PDF'? If so, you could arrange to save only the DIV innerHTML, not the page view. If you want to consider this, I can post an example. — Francis Hemsher, Jan 19 '17 at 14:43
Yes I would consider that you may post the example I just hope my svg will work though — Graeme Richard Petersen, Jan 20 '17 at 05:46

score 1 · Answer 1 · answered Jan 20 '17 at 12:46

You can save the inline SVG segment of your web page as a PDF. This uses the browser's 'Print..' feature, the window events onbeforeprint, onafterprint, plus window.matchMedia, and 'Save as PDF'.

The PDF also has the nice feature called 'Snapshot' that can be used to trim the SVG image of the PDF and save it, via any image editor, as a .png file.

NOTE: Copy the below into your own HTML file. (It does not print as programmed because it is contained in this stackoverflow page.)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Save SVG as PDF</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body style='padding:10px;font-family:arial'>
<center>
<h4>Save SVG as PDF</h4>
<div style='width:90%;background-color:gainsboro;text-align:justify;padding:10px;border-radius:6px;'>
You can save the inline SVG segment of your web page as a PDF. This uses the browser's 'Print..' feature, the window events <b>onbeforeprint</b>, <b>onafterprint</b>, plus <b>window.matchMedia</b>, and 'Save as PDF'.
</div>
<table><tr>
<td>
<div style="padding:10px;width:400px;text-align:justify">
<b>Scenerio:</b><br />
Select the browser's <b>Print..</b>, choose 'Save as PDF' option , then select <b>Save</b>.<br> <br>
The function <b>beforePrint</b> hides all elements except the DIV containing the inline SVG, plus the DIV is postioned to top/left at 0 px.
<br><br>
The function <b>afterPrint</b> returns the elements to their original visibility and locatons.<br> <br>
The event <b>window.matchMedia</b> automatically calls the above functions for Chrome.<br>
Both IE and FF use the window events <b>onbeforeprint</b> and <b>onafterprint</b>.
</div>
</td>
<td>
<div id="svgDiv" style='background-color:lightgreen;width:400px;height:400px;'>
<svg id="mySVG" width="400" height="400">
<circle cx=200 cy=200 fill=yellow r=150 stroke=none />
</svg>
</div>

</td>
</tr></table>
<script id=myScript>
function beforePrint()
{
    document.body.style.visibility="hidden"
    svgDiv.style.visibility='visible'
    svgDiv.style.position="absolute"
    svgDiv.style.top="0px"
    svgDiv.style.left="0px"
}
function afterPrint()
{
    document.body.style.visibility=""
    svgDiv.style.visibility=''
    svgDiv.style.position=""
    svgDiv.style.top=""
    svgDiv.style.left=""
}
//---Chrome Browser---
 if (window.matchMedia)
    {
        var mediaQueryList = window.matchMedia('print');
        mediaQueryList.addListener(function(mql)
            {
                if (mql.matches)
                {
                    beforePrint();
                }
                else
                {
                    afterPrint();
                }
            }
        );
    }
     //---IE & FF---
window.onbeforeprint = beforePrint
window.onafterprint = afterPrint;
</script>
</body>

</html>

@GraemeRichardPetersen I guess the above example does not work for you. So I'll take a further look at your canvas method and see if I can find the problem. — Francis Hemsher, Jan 20 '17 at 13:53
@GraemeRichardPetersen I just can't get it to work. It seems jsPDF cannot handle the canvas.toDataURL("image/png"). Sorry I can't help. — Francis Hemsher, Jan 20 '17 at 16:47
Dont you have an example how to save svg to png or jpeg im using chartist.js — Graeme Richard Petersen, Jan 20 '17 at 16:55
There is nice example at: http://stackoverflow.com/questions/27230293/how-to-convert-svg-to-png-using-html5-canvas-javascript-jquery-and-save-on-serve — Francis Hemsher, Jan 20 '17 at 17:28

Save div of svg to pdf

1 Answers1