如何在 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，您可以使用 [=19] =]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 ]
        });


}

希望对您有所帮助！！

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

How to handle SVG and canvas in pdfmake & html2pdfmake

javascript

svg

html5-canvas

pdfmake