divのsvgをPDFに保存

私はsvgのdivをpdfに保存するとうまくいきますが、それは私にsvgを表示しません。アイブ氏は2週間、この問題で苦労されてこれは、ファイルがそれをダウンロードされたときに代わりに、それは次のように表示され、このdivのsvgをPDFに保存

のように表示されるはずの溶液または任意のアイデアやソリューション

とそこに誰もがそこにあります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>

に表示されません。

出典

2017-01-19 Graeme Richard Petersen

あなたはその後、「PDFとして保存」を選択し、ブラウザの印刷...リクエストの使用を検討してますか？その場合は、ページビューではなく、DIV innerHTMLのみを保存するように調整できます。これを考慮したい場合は、例を投稿することができます。 –

はい私はあなたが私のsvgがうまくいくことを望む例を投稿することを検討するだろう –

svg image.thatの代わりにpng/jpegイメージを使う – Lini

ウェブページのインラインSVGセグメントをPDFとして保存できます。これは、ブラウザの '印刷..'機能、ウィンドウイベントonbeforeprint,onafterprint、プラスwindow.matchMedia、および 'Save as PDF'を使用します。

PDFには、スナップショットという素晴らしい機能があり、PDFのSVGイメージをトリミングして、任意のイメージエディタで.pngファイルとして保存することができます。

注：以下をあなた自身のHTMLファイルにコピーしてください。（プログラムされたとして、それがこのstackoverflowのページに含まれているので、それが印刷されません。）

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

出典

2017-01-20 12:46:26

私のブラウザにsvgをpdfとして保存するにはどうすればいいですか？ –

@GraemeRichardPetersen私は推測します上記の例はあなたのためには機能しません。だから私はあなたのキャンバスメソッドをさらに見て、私が問題を見つけることができるかどうかを見ていきます。 –

@GraemeRichardPetersen私はそれを動作させることができません。 jsPDFがcanvas.toDataURL（ "image/png"）を処理できないようです。申し訳ありませんが私は助けることはできません。 –

答えて

関連する問題