保存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

回答

相关问题