Загрузите схему организационной структуры в PDF / PNG, используя jspdf. - PullRequest
Новая
       23

Загрузите схему организационной структуры в PDF / PNG, используя jspdf.

0 голосов
/ 09 мая 2019

Я создал организационную структуру, используя библиотеку getorgchart.при создании диаграммы узлы визуализируют тег xml вместе с тегами и эффектом.Я пытаюсь преобразовать диаграмму в pdf или png. Я мог видеть структуру, но каждый узел, заполненный черным цветом, заголовок и эффект изображения не отображаются в png и pdf.

Visual studio 2017, SQL, JavaScript,JQuery 

 // library generating code as below for chart inside the html div
 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" 
 viewBox="-1512.8396953533202,-106.69565491902367,
 2928.238484210526,1335.3984">
 <defs></defs>
 <g>
    <g data-node-id="#" class="get-level-2 " 
       transform="matrix(1,0,0,1,0,422)">

    <clipPath id="getVivaClip">
    <path class="get-box" d="M35 0 L187 0 Q222 0 222 35 L222 187 Q222 222 
    187 222 L35 222 Q0 222 0 187 L0 35 Q0 0 35 0 Z"></path>
    </clipPath>

    <image clip-path="url(#getVivaClip)" xlink:href="#" x="0" y="0"   
     height="222" preserveAspectRatio="xMidYMid slice" width="222">
    </image>

   <path class="get-text-pane" d="M222 172 Q222 222 187 222 L35 222 Q0 222 
    0 187 L0 172 Z"></path>

   <path class="get-text-pane" d="M35 0 L187 0 Q222 0 222 35 L222 50 L0 50 
   L0 50 Q0 0 35 0 Z"></path>

   <path class="get-box" d="M35 0 L187 0 Q222 0 222 35 L222 187 Q222 222 
    187 222 L35 222 Q0 222 0 187 L0 35 Q0 0 35 0 Z"></path>

   <g transform="matrix(1,0,0,1,0,100)">
   <g data-action="edit" class="btn1" 
   transform="matrix(0.14,0,0,0.14,-30,70)">
    ....
    .
    .
    .likewise 
   <g>....</g>
   <g>....</g>
   <g>....</g>
   </svg>


//generate pdf(javascript)

 $('#cmd').click(function ()
 {
    const svg1 = document.querySelector('svg').cloneNode(true);
    const svgAsXML = (new XMLSerializer).serializeToString(svg1);
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var DOMURL = self.URL || self.webkitURL || self;

    var img = new Image();

    var svg = new Blob([svgAsXML],{ type: "image/svg+xml;charset=utf-8"});

    var url = DOMURL.createObjectURL(svg);

    img.onload = function ()
    {
        ctx.drawImage(img, 0, 0);
        var png = canvas.toDataURL("image/png");
        document.querySelector('#png-container').innerHTML = '<img src="' 
        + png + '"/>';
        var pdf = new jsPDF();
        pdf.addImage(png, 'JPEG', 50, 50);
        pdf.save("Test.pdf");
        DOMURL.revokeObjectURL(png);
    };
    img.src = url;

});

Я ожидаю вывод в формате PDF или PNG с четким представлением о веб-странице с цветами и текстом.

...