CODEWITHSUNDEEP
javascriptjquerysvgpdf.jssvg.js
Graeme Richard Petersen
Graeme Richard Petersen

Reputation: 37

Save div of svg to pdf

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

enter image description here

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

enter image description here

  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>

Upvotes: 1

Views: 2827

Answers (1)

Francis Hemsher
Francis Hemsher

Reputation: 3488

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>

Upvotes: 1

Related Questions