Jointjs 图到 pdf 显示鼠标悬停 link svg 也

Question

我正在使用 jspdf 和 canvas 将使用 Jointjs 库制作的图表导出为 pdf：下面是我的 javascript 代码::

        var svg = document.querySelector('svg');

        var serializer = new XMLSerializer();
        var svgString = serializer.serializeToString(svg);
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');

        context.fillStyle = '#FFFF';

        canvg(canvas, svgString);

        var imgData = canvas.toDataURL('image/png');

        // Generate PDF
        doc.setFontSize(10);
        doc.text(35, 25, "Google Cloud Craft");
        doc.addImage(imgData, 'PNG', 10, 50);
        doc.save('test.pdf');

我在 canvas 下载后得到的结果是：

我想要的是那些黑色箭头标记不应该出现，因为它们在鼠标悬停事件中显示，应该像下图一样供参考：

请告诉我如何实现。

Answer 1

让我试着回答。

添加以下代码以在序列化之前隐藏鼠标悬停元素

   $(".marker-arrowhead").css("display", "none");
   $(".tool-remove").css("display", "none");
   $(".tool-options").css("display", "none");
   $(".marker-vertices").css("display", "none");

希望对您有所帮助。

Answer 2

我找到了一个解决方案分享，这样如果有人遇到这个问题可以得到帮助。

这就是解决方法，熟悉jointjs的就明白了。

link.attr({

            '.marker-arrowheads': {
                fill: 'none'
            },
            '.connection-wrap': {
                fill: 'none'
            },
            '.marker-vertices': {
                fill: 'none'
            },
            '.link-tools': {
                fill: 'none'
            }
        });

Answer 3

这是我的建议:)

const classes = ['.marker-vertices', '.link-tools'];
const svg = this.paper.svg.cloneNode(true);

// remove tools
classes.forEach(c => {
  const elements = svg.querySelectorAll(c);
  elements.forEach(el => { el.style.display = 'none'; });
});

Jointjs 图到 pdf 显示鼠标悬停 link svg 也

Jointjs diagram to pdf showing mouseover link svg also

pdf

svg

canvas

jointjs

jspdf