In the following code print is working fine but I am unable to create pdf of svg image.If I generate pdf then it is getting generated with blank output(blank pdf).I tried capture,js.pdf,dompdf,tcpdf but not works for me.
function PrintElem(elem)
{
Popup($(elem).html());
}
function Popup(data)
{
var mywindow = window.open('', 'parent', 'height=400,width=600');
mywindow.document.write('<html><head><title>my div</title>');
/*optional stylesheet*/ //mywindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />');
mywindow.document.write('</head><body >');
mywindow.document.write(data);
mywindow.document.write('</body></html>');
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10
mywindow.print();
mywindow.close();
return true;
}
function pdf()
{
var doc = new jsPDF();
var specialElementHandlers = {
'#editor': function (element, renderer) {
return true;
}
};
doc.fromHTML($('.parent').html(), 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
});
doc.save('sample-file.pdf');
}
function capture() {
html2canvas($('.panzoom'),{
onrendered: function (canvas) {
var imgString = canvas.toDataURL("image/png");
var a = document.createElement('a');
a.href = imgString;
a.download = "image.png";
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
});
} <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jspdf/0.9.0rc1/jspdf.min.js"></script>
<script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="main_div">
<div>
<div class="nav_div">
<input type="button" value="Print Map" onclick="PrintElem('.parent')" />
<input type="button" value="Download Map" onclick="pdf()" />
</div>
</div>
<div class="parent">
<div class="panzoom" >
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%"
height="400px" xml:space="preserve">
<g id="LWPOLYLINE_45_">
<polygon id="1" style="fill:#78AB46;stroke:#231F20;stroke-miterlimit:10;" points="300,250 350,200 400,250 500,250 500,300 300,300" />
</g>
<g id="LWPOLYLINE_44_">
<polygon id="2" style="fill:#78AB46;stroke:#231F20;stroke-miterlimit:10;" points="350,200 400,150 500,250 400,250" />
</g>
<g id="LWPOLYLINE_43_">
<polygon id="3" style="fill:#78AB46;stroke:#231F20;stroke-miterlimit:10;" points="400,150 600,150 580,250 600,300 500,250"/>
</g>
</svg>
</div>
</div>
<div class="pop_up_div">
<div id="header_lot">
</div>
<div id="show_form"></div>
</div>
</div>