jsPDF не поддерживает формат SVG - PullRequest
Новая
       18

jsPDF не поддерживает формат SVG

0 голосов
/ 24 сентября 2019

jsPdf библиотека не поддерживает SVG должным образом.Я добавил мой код в JSFiddle для вашей справки. 

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $('#gpdf').on('click', function () {
        //$('body').scrollTop(0);
        createPDF();
    });
    //create pdf
    function createPDF() {
        var HTML_Width = $("body").width();
        var HTML_Height = $("body").height();
        var top_left_margin = 15;
        var PDF_Width = HTML_Width+(top_left_margin*2);
        var PDF_Height = (PDF_Width*1.5)+(top_left_margin*2);
        var canvas_image_width = HTML_Width;
        var canvas_image_height = HTML_Height;

        var totalPDFPages = Math.ceil(HTML_Height/PDF_Height)-1; 
            html2canvas($("body")[0],{allowTaint:true}).then(function(canvas) {
            canvas.getContext('2d'); 
            console.log(canvas.height+"  "+canvas.width);
            var imgData = canvas.toDataURL("image/jpeg", 1.0);
            var pdf = new jsPDF('p', 'pt',  [PDF_Width, PDF_Height]);
            pdf.addImage(imgData, 'PNG', top_left_margin, top_left_margin,canvas_image_width,canvas_image_height);
            for (var i = 1; i <= totalPDFPages; i++) {
            pdf.addPage(PDF_Width, PDF_Height);
            pdf.addImage(imgData, 'PNG', top_left_margin, -(PDF_Height*i)+(top_left_margin*4),canvas_image_width,canvas_image_height);
        } 
        pdf.save("HTML-Document.pdf");
    });
    }
});
</script>

</head>
<body>
<div id="PDFcontent">

<h3>First PDF</h3>


<div id="demo_usersprotovis" style="display: inline-block; position: relative;"><svg font-size="10px" font-family="sans-serif" fill="none" stroke="none" stroke-width="1.5" style="-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;" unselectable="on" width="668" height="260"><defs></defs><rect pointer-events="all" width="668" height="260" fill="rgb(127,127,127)" fill-opacity="0.00001"></rect><g><g transform="translate(3,3)"><g clip-path="url(#zh)"><clipPath id="zh"><rect x="199.2421875" y="229" width="263.515625" height="25"></rect></clipPath><g transform="translate(199.2421875,229)"><g transform="translate(5,5)"><g><g><g><g><g><path shape-rendering="crispEdges" pointer-events="none" cursor="pointer" fill="rgb(31,119,180)" stroke="rgb(31,119,180)" d="M-3.872983346207417,-3.872983346207417L3.872983346207417,-3.872983346207417 3.872983346207417,3.872983346207417 -3.872983346207417,3.872983346207417Z" transform="translate(7.5,7.5) "></path></g></g></g><g><text pointer-events="all" cursor="pointer" x="3" dy=".35em" transform="translate(15,7.5)" fill="rgb(0,0,0)">category3</text></g></g><g transform="translate(67.1875,0)"><g><g><g><path shape-rendering="crispEdges" pointer-events="none" cursor="pointer" fill="rgb(255,127,14)" stroke="rgb(255,127,14)" d="M-3.872983346207417,-3.872983346207417L3.872983346207417,-3.872983346207417 3.872983346207417,3.872983346207417 -3.872983346207417,3.872983346207417Z" transform="translate(7.5,7.5) "></path></g></g></g><g><text pointer-events="all" cursor="pointer" x="3" dy=".35em" transform="translate(15,7.5)" fill="rgb(0,0,0)">category1</text></g></g><g transform="translate(134.109375,0)"><g><g><g><path shape-rendering="crispEdges" pointer-events="none" cursor="pointer" fill="rgb(44,160,44)" stroke="rgb(44,160,44)" d="M-3.872983346207417,-3.872983346207417L3.872983346207417,-3.872983346207417 3.872983346207417,3.872983346207417 -3.872983346207417,3.872983346207417Z" transform="translate(7.5,7.5) "></path></g></g></g><g><text pointer-events="all" cursor="pointer" x="3" dy=".35em" transform="translate(15,7.5)" fill="rgb(0,0,0)">category2</text></g></g><g transform="translate(201.296875,0)"><g><g><g><path shape-rendering="crispEdges" pointer-events="none" cursor="pointer" fill="rgb(214,39,40)" stroke="rgb(214,39,40)" d="M-3.872983346207417,-3.872983346207417L3.872983346207417,-3.872983346207417 3.872983346207417,3.872983346207417 -3.872983346207417,3.872983346207417Z" transform="translate(7.5,7.5) "></path></g></g></g><g><text pointer-events="all" cursor="pointer" x="3" dy=".35em" transform="translate(15,7.5)" fill="rgb(0,0,0)">product</text></g></g></g></g></g></g></g><g transform="translate(3,3)"><g><g transform="translate(16.55,6.3500000000000005)"><g><path transform="translate(314.45,105.65)" d="M5.638694835611621e-15,-92.086875A92.086875,92.086875 0 0,1 54.12730705470044,74.49984683388149L0,0Z" fill="rgb(31,119,180)" fill-rule="evenodd"></path><path transform="translate(314.45,105.65)" d="M54.12730705470044,74.49984683388149A92.086875,92.086875 0 0,1 -54.12730705470043,74.49984683388149L0,0Z" fill="rgb(255,127,14)" fill-rule="evenodd"></path><path transform="translate(314.45,105.65)" d="M-54.12730705470043,74.49984683388149A92.086875,92.086875 0 0,1 -54.12730705470045,-74.49984683388148L0,0Z" fill="rgb(44,160,44)" fill-rule="evenodd"></path><path transform="translate(314.45,105.65)" d="M-54.12730705470045,-74.49984683388148A92.086875,92.086875 0 0,1 -1.6916084506834865e-14,-92.086875L0,0Z" fill="rgb(214,39,40)" fill-rule="evenodd"></path></g><g><g><path pointer-events="none" d="M397.0058664866781,78.82597293890419L404.5418005576718,76.3773995297257L409.178125,76.3773995297257L424.90062500000005,76.3773995297257L430.36156250000005,76.3773995297257" stroke="rgb(0,0,0)" stroke-width="0.5"></path></g><g><text pointer-events="none" x="3" y="-3" transform="translate(430.36156250000005,81.8383370297257)" fill="rgb(0,0,0)">40 (40%)</text></g><g><path pointer-events="none" d="M314.45,192.45437500000003L314.45,200.378125L409.178125,200.378125L424.90062500000005,200.378125L430.36156250000005,200.378125" stroke="rgb(0,0,0)" stroke-width="0.5"></path></g><g><text pointer-events="none" x="3" y="-3" transform="translate(430.36156250000005,205.8390625)" fill="rgb(0,0,0)">20 (20%)</text></g><g><path pointer-events="none" d="M227.645625,105.65000000000002L219.72187499999998,105.65000000000002L219.72187499999998,105.65000000000002L203.999375,105.65000000000002L198.5384375,105.65000000000002" stroke="rgb(0,0,0)" stroke-width="0.5"></path></g><g><text pointer-events="none" x="-3" y="-3" transform="translate(198.5384375,111.11093750000002)" fill="rgb(0,0,0)" text-anchor="end">30 (30%)</text></g><g><path pointer-events="none" d="M287.62597293890417,23.09413351332188L285.1773995297257,15.55819944232816L219.72187499999998,15.55819944232816L203.999375,15.55819944232816L198.5384375,15.55819944232816" stroke="rgb(0,0,0)" stroke-width="0.5"></path></g><g><text pointer-events="none" x="-3" y="-3" transform="translate(198.5384375,21.01913694232816)" fill="rgb(0,0,0)" text-anchor="end">10 (10%)</text></g></g></g></g></g></g><rect pointer-events="stroke" width="668" height="260" stroke-opacity="0"></rect></svg><div id="tipsyPvBehavior_1569344060457" class="fakeTipsyTarget" original-title="" style="padding: 0px; margin: 0px; position: absolute; pointer-events: none; display: block; z-index: -10; border-width: 0px; left: 357px; top: 245px; width: 1px; height: 1px;"></div></div>
<p>Content to be written in PDF can be placed in this DIV!</p>

</div>

<div id="ignoreContent">

<p>Only for display and not in pdf</p>

</div>

<button id="gpdf">Generate PDF</button>
</body>
</html>

Когда я экспортирую PDF, он не дает точного результата.Я использовал HTML2Canvas и jsPDF, чтобы распечатать всю страницу в формате PDF.

Не могли бы вы посоветовать мне?

...