javascript - 如何在 pdfmake 和 html2pdfmake 中处理 SVG 和 canvas

Question

我正在使用html2pdfmake将 div 转换为 pdf。我的 div 包含表格，还包含一些 svg 图表。但我没有将 svg 放入 pdf 中。我尝试使用 base64 对其进行转换，但将 base64 代码粘贴到 pdf 中。

我将 svg 转换为 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);

然后我将相同的内容添加到内容中。

另外，当我使用ParseHtml(content,document.getElementById("myPDFDiv"))

我的 div myPDFDiv 从 DOM 中删除。

任何帮助将不胜感激!!

Answer 1

您可以使用html2pdfmake，它会迭代div中的所有元素并生成JSON，您可以将其与pdfmake一起使用。

您可以通过添加 SVG 的 switch case 来添加 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 ]
        });


}

希望对你有帮助!!