javascript - How can I generate pdf of svg image -
in following code print working fine unable create pdf of svg image.if generate pdf getting generated blank output(blank pdf).i tried capture,js.pdf,dompdf,tcpdf not works 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 ie >= 10 mywindow.focus(); // necessary 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 = 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>
Comments
Post a Comment