pdfmakeとhtml2pdfmakeでSVGとキャンバスを扱う方法

Question

私はhtml2pdfmakeを使ってdivをpdfに変換しています。私のdivはテーブルを含んでおり、いくつかのsvgチャートも含まれています。しかし、私はPDFにSVGを取得していない。私はbase64を使って変換しようとしましたが、pdfにbase64コードを貼り付けています。

私は同じように私のbase64でSVG変換：

var html = d3.select('#idOfSVG').select("svg").attr("version", 1.1).attr("xmlns", "http://www.w3.org/2000/svg").node().parentNode.innerHTML; 
var imgsrc = 'data:image/svg+xml;base64,'+ btoa(html); 
var base_image = new Image(); 
base_image.src = imgsrc; 
canvas = document.createElement('canvas'); 
canvas.id = 'canvas' 
document.body.appendChild(canvas); 
canvas.width = 500; 
canvas.height = 500; 
canvas.getContext('2d').drawImage(base_image,0,0); 

は、それから私は、コンテンツに同じを追加しました。また

私はDOMから削除されるmyPDFDivParseHtml(content,document.getElementById("myPDFDiv"))

私のdivを使用していました。

ご協力いただければ幸いです！

Answer 1

あなたはhtml2pdfmakeを使用することができ、それはdivの中のすべての要素を反復処理し、pdfmakeで使用できる同じのためJSONを作ります。

あなたが好きSVG用スイッチケースを追加することによって、SVGのサポートを追加することができます。

Case 'SVG' : 
addImage(cnt,e); 

function addImage (cnt,e) { 
      //Serialize the svg element and then put it in a canvas 
//Then update the cnt object 
var url = canvas.toDataURL('image/png'); 
     cnt.push({image: url, 
       width: 200, 
       height: 250, 
       margin: [ 20, 0, 0, 0 ] 
     }); 


} 

はそれが役に立てば幸い！