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');

下载后在画布上得到的结果是：

我想要的是那些黑色箭头标记不应该出现在鼠标悬停事件中，它应该如下图所示：

请让我知道如何实现这一目标。

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显示鼠标悬停链接svg也

3 个答案: