HTMLキャンバスを使用してSVGグラフをPDFにエクスポートする

Question

SVGで棒グラフをレンダリングするD3.jsを使用していますが、HTML5キャンバスにレンダリングされた他のグラフのように完全なグラフのinitをPDFにエクスポートできません。それ、どうやったら出来るの？

(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

私はこのプラグインが動作しています。私のHTMLタグで問題ありません。

** HTML **

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

**キャンバスに隠れたSVGにそのための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。その後、.toDataURL（）を使用してキャンバスをbase64文字列に変換します。 JsPdf Repo。 Canvg Repo:。