在Vaadin中以文本形式获取元素SVG子元素

Question

我在一个具有特定ID的div中使用javascript创建了一个SVG元素。我的主要目标是获得SVG图像，让用户下载它。

因此，我的想法可能是绝对错误的，是使用容器访问Div元素（我使用的是Vaadin23）。getElement（），获取子元素，这是我的SVG，然后执行svgElement。getOuterHTML（）以获取字符串并将其保存到某个位置。我可以看到元素，我知道它在那里，但当我从vaadin打印容器元素时，它没有任何子元素。

我的情况：

<div class="chart-container" id="chart-div-02250ca9-3b1b-4d09-aeb2-f38c4c797fc9">
    <div>
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" role="group" style="width: 100%; height: 100%; overflow: visible;">
        ...
        </svg>
    </div>
</div>

我从内容中得到什么.getElement（）.getOuterHTML（），其中内容是我的DIV，ID：

<div id="chart-div-02250ca9-3b1b-4d09-aeb2-f38c4c797fc9" class="chart-container">
</div>

我错过了什么？

如果这是预期的行为，您将如何获取SVG元素？我尝试使用JS，然后将结果重估为Java，但这对Futures和所有同步的东西来说都是一团糟。

Answer 1

Vaadin不会自动将客户端用JavaScript创建的子元素或模板内容同步到服务器。这仅仅是因为从性能的角度来看，添加这样的实现确实是有问题的，尽管这是很少需要的。

您可以做的是将组件实现为LitTemplate。它允许您使用@Id注释从模板中注入所选元素

@JsModule("./my-template.ts")
@Tag("my-template")
public class MyTemplate extends LitTemplate {

@Id("svg")
Element svgElement;

...
}

而“前端/my-template.ts”类似于

import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('my-template')
export class MyTemplate extends LitElement {

render() {
   return html`
<div class="chart-container" id="chart-div-02250ca9-3b1b-4d09-aeb2-f38c4c797fc9">
    <div>
        <svg id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" role="group" style="width: 100%; height: 100%; overflow: visible;">
        ...
        </svg>
    </div>
</div>';
}
}

但是请注意，Vaadin中没有对Svg元素的更深入的支持，所以我不确定你能用它实现什么。

所以最终的问题是，你为什么需要它？这个问题的答案可能会为你揭示其他的途径。