Print a diagram with html2Canvas, jsPdf, file-saver

183 Views Asked by At

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

There are 0 best solutions below