I have an Angular application where I use the jsPlumb library to create a diagram. The output of jsPlumb is a wrapper div with many other divs and svgs inside positioned as absolute. This wrapper div I wish to print using libraries such as html2Canvas, jsPdf, file-saver, Canvg. I use html2Canvas to convert the div into a canvas which I can then download and save with file-saver. The problem is that the produced canvas does not include the svgs, so part of the diagram is missing. From what I've read I need to convert those svgs to canvas objects (before or after html2Canvas call, I do not know). Below is my effort, which basically ruins the output of html2Canvas
const diagram = this.diagram.nativeElement as HTMLDivElement;
html2canvas(diagram, {
width: 3000,
height: 1000
}).then((canvas) => {
diagram.querySelectorAll('svg').forEach(async function (svg) {
(
await Canvg.from(
canvas.getContext('2d'),
new XMLSerializer()
.serializeToString(svg)
.replace(/xmlns=\"http:\/\/www\.w3\.org\/2000\/svg\"/, '')
)
).start();
});
document.body.append(canvas);
});