Speichern div von Svg zu pdf

Wenn ich das Div von Svg zu pdf speichern funktioniert es gut, aber es zeigt mir nicht die Svg. Ive, das für 2 Wochen mit diesem Problem zu kämpfen gibt es jemanden da draußen mit einer Lösung oder irgendwelche Ideen oder LösungenSpeichern div von Svg zu pdf

Es sollte

wie diese angezeigt werden es wie folgt angezeigt werden stattdessen, wenn Datei es heruntergeladen zeigt nicht die 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>

Quelle

2017-01-19 Graeme Richard Petersen

Würden Sie das Drucken über den Browser ... Anfrage, dann wählen Sie ‚Als PDF speichern‘? Wenn dies der Fall ist, können Sie nur das DIV innerHTML und nicht die Seitenansicht speichern. Wenn Sie dies berücksichtigen möchten, kann ich ein Beispiel veröffentlichen. –

Ja, ich würde in Betracht ziehen, dass Sie das Beispiel postet Ich hoffe nur, dass meine Svg funktioniert –

Verwenden Sie png/jpeg Bild anstelle von Svg image.that funktioniert – Lini

Sie können das Inline-SVG-Segment Ihrer Webseite als PDF speichern. Dies verwendet die "Drucken" -Funktion des Browsers, die Fensterereignisse onbeforeprint, onafterprint, plus window.matchMedia und "Als PDF speichern".

Die PDF hat auch die nette Funktion 'Snapshot', die verwendet werden kann, um das SVG-Bild der PDF zu trimmen und es mit jedem Bildbearbeitungsprogramm als .png-Datei zu speichern.

HINWEIS: Kopieren Sie die folgende in Ihre eigene HTML-Datei. (Es druckt nicht so programmiert, weil es in dieser Stackoverflow-Seite enthalten ist.)

<!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>

Quelle

2017-01-20 12:46:26

Wie kann ich die Svg zu meinem Browser als pdf speichern –

@GraemeRichardPetersen Ich denke, die Das obige Beispiel funktioniert nicht für Sie. Also werde ich einen Blick auf Ihre Canvas-Methode werfen und sehen, ob ich das Problem finden kann. –

@GraemeRichardPetersen Ich kann es einfach nicht zur Arbeit bringen. Es scheint, dass jsPDF nicht mit canvas.toDataURL ("image/png") umgehen kann. Entschuldigung, ich kann nicht helfen. –

Speichern div von Svg zu pdf

Antwort

Verwandte Themen