Сохранить div svg в pdf

Когда я сохраняю div svg в pdf, он отлично работает, но он не показывает мне svg. Ive борется с этой проблемой в течение 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

Считаете ли вы, с помощью Print браузера ... запрос, а затем выберите «Сохранить как PDF»? Если это так, вы можете сохранить только DIV innerHTML, а не просмотр страницы. Если вы хотите это рассмотреть, я могу опубликовать пример. –

Да, я бы подумал, что вы можете опубликовать этот пример. Я просто надеюсь, что мой svg будет работать, хотя –

Используйте png/jpeg image вместо svg image.that works – Lini

Вы можете сохранить встроенный сегмент SVG вашей веб-страницы в формате PDF. Это использует функцию браузера 'Print ..', события окна onbeforeprint, onafterprint, плюс window.matchMedia и 'Сохранить как PDF'.

PDF также имеет приятную функцию под названием «Снимок», которая может использоваться для обрезки изображения SVG PDF и сохранения его через любой редактор изображений в виде файла .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»). Извините, я не могу помочь. –

ответ

Смежные вопросы