pdfmake 및 html2pdfmake에서 SVG 및 캔버스 처리 방법

Question

div에서 pdf로 변환 할 때 html2pdfmake을 사용하고 있습니다. 내 div 테이블을 포함하고 또한 일부 svg 차트가 포함되어 있습니다. 그러나 나는 pdf로 svg를 얻지 않을 것이다. 나는 base64를 사용하여 그것을 변환하려고 시도했지만 pdf에 base64 코드를 붙여 넣었다.

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

그런 다음 내가 컨텐츠로 같은 추가 :

내가 좋아하는 base64로 내 SVG로 변환.

또한 내가 myPDFDiv는 DOM에서 삭제됩니다 ParseHtml(content,document.getElementById("myPDFDiv"))

내 사업부를 사용하는 경우.

도움이 될 것입니다!

Answer 1

당신은 html2pdfmake, 그것은 사업부의 모든 요소를 ​​반복 할 사용하고 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 ] 
     }); 


} 

는 희망이 도움이!