Question

当我将svg的div保存为pdf时，它工作正常，但它没有显示svg。我一直在努力解决这个问题2周是否有人有解决方案或任何想法或解决方案

它应该显示如下

相反，当下载文件时它显示如下，但不显示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>

Answer 1

您可以将网页的内嵌SVG段保存为PDF格式。这使用浏览器的“打印..”功能，窗口事件 onbeforeprint ， onafterprint ，再加上 window.matchMedia 和“另存为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>

将svg的div保存为pdf

1 个答案: