Comment gérer SVG et canvas en pdfmake & html2pdfmake

Question

J'utilise html2pdfmake pour convertir un div en pdf. Ma div contient des tableaux et contient également des graphiques svg. Mais je ne reçois pas le svg dans le pdf. J'ai essayé de le convertir en utilisant base64 mais collez le code base64 dans le pdf.

Je converti mon svg à base64 comme:

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); 

Puis j'ai ajouté la même dans le contenu.

Aussi quand je ParseHtml(content,document.getElementById("myPDFDiv"))

Mon div myPDFDiv est supprimé du DOM.

Toute aide sera grandement appréciée !!

Answer 1

Vous pouvez utiliser html2pdfmake, il itère tous les éléments de la div et faire JSON pour la même que vous pouvez utiliser avec pdfmake.

Vous pouvez ajouter le support SVG en ajoutant un boîtier de commutation pour SVG comme:

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 ] 
     }); 


} 

Hope it helps !!