Как экспортировать SVG-график в pdf с использованием html canvas

Question

Я использую D3.js, который отображает гистограмму в SVG, но я не могу экспортировать полный график init в PDF, как и другой график, который отображается в холсте HTML5. Как мне это сделать?

(function(){ 
    var 
     form = $('.form'), 
     cache_width = form.width(), 
     a4 =[ 1100.28, 580.89]; // for a4 size paper width and height 

    $('#create_pdf').on('click',function(){ 

     $('body').scrollTop(0); 
     createPDF(); 
    }); 
//create pdf 
    function createPDF(){ 
     getCanvas().then(function(canvas){ 
     var imgData = canvas.toDataURL('image/png'); 
     /* 
     Here are the numbers (paper width and height) that I found to work. 
     It still creates a little overlap part between the pages, but good enough for me. 
     if you can find an official number from jsPDF, use them. 
     */ 
     var imgWidth = 210; 
     var pageHeight = 295; 
     var imgHeight = canvas.height * imgWidth/canvas.width; 
     var heightLeft = imgHeight; 

     var doc = new jsPDF('p', 'mm'); 
     var position = 0; 

     doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight); 
     heightLeft -= pageHeight; 

     while (heightLeft >= 0) { 
      position = heightLeft - imgHeight; 
      doc.addPage(); 
      doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight); 
      heightLeft -= pageHeight; 
     } 
     doc.save('datamagnified_AE.pdf'); 
     }); 
    } 


// create canvas object 
    function getCanvas(){ 
     form.width((a4[0]*1.33333) -80).css('max-width','none'); 
     return html2canvas(form,{ 
      imageTimeout:2000, 
      removeContainer:true 
     }); 
    } 
}()); 

Answer 1

Я получил этот плагин working.Small Issue в моем теге html.

** HTML **

<li> 
<a title="Download" id="create_pdf" ></a> 
</li> 

** JQuery **

(function(){ 
     var 
      form = $('.form'), 
      cache_width = form.width(), 
      a4 =[ 1100.28, 580.89]; // for a4 size paper width and height 

     $('#create_pdf').on('click',function(){ 

      $('body').scrollTop(0); 
      createPDF(); 
     }); 
    //create pdf 
     function createPDF(){ 
      getCanvas().then(function(canvas){ 
      var imgData = canvas.toDataURL('image/png'); 
      /* 
      Here are the numbers (paper width and height) that I found to work. 
      It still creates a little overlap part between the pages, but good enough for me. 
      if you can find an official number from jsPDF, use them. 
      */ 
      var imgWidth = 210; 
      var pageHeight = 295; 
      var imgHeight = canvas.height * imgWidth/canvas.width; 
      var heightLeft = imgHeight; 

      var doc = new jsPDF('p', 'mm'); 
      var position = 0; 

      doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight); 
      heightLeft -= pageHeight; 

      while (heightLeft >= 0) { 
       position = heightLeft - imgHeight; 
       doc.addPage(); 
       doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight); 
       heightLeft -= pageHeight; 
      } 
      doc.save('datamagnified_AE.pdf'); 
      }); 
     } 


    // create canvas object 
     function getCanvas(){ 
      form.width((a4[0]*1.33333) -80).css('max-width','none'); 
      return html2canvas(form,{ 
       imageTimeout:2000, 
       removeContainer:true 
      }); 
     } 

    }()); 

Try canvg для того, чтобы скрытый SVG на холст. Затем преобразуйте холст в строку base64, используя .toDataURL(). JsPdf Repo. Canvg Repo:.