保存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將工作，雖然 –

使用PNG/jpeg圖像，而不是svg image.that作品 – Lini

您可以將網頁的內聯SVG段保存爲PDF。這使用瀏覽器的'打印..'功能，窗口事件onbeforeprint,onprint，plus window.matchMedia和'另存爲PDF'。

該PDF還具有稱爲「快照」的很好的功能，可用於修剪PDF的SVG圖像，並通過任何圖像編輯器將其保存爲.png文件。

注意：將以下內容複製到您自己的HTML文件中。（因爲它包含在此計算器頁面未打印的程序。）

<!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」）。對不起，我忍不住。 –

保存div的svg爲pdf

回答

相關問題