Vaadin中处理客户端生成SVG元素的策略：从DOM同步到服务器端渲染

<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>

import com.vaadin.flow.component.Tag;
import com.vaadin.flow.component.dependency.JsModule;
import com.vaadin.flow.component.littemplate.LitTemplate;
import com.vaadin.flow.dom.Element;
import com.vaadin.flow.templatemodel.TemplateModel;

@JsModule("./frontend/my-template.ts") // 指向前端模板文件
@Tag("my-template") // 定义组件的HTML标签名
public class MyTemplate extends LitTemplate {

    // 使用@Id注解将模板中id为"svg"的元素注入到svgElement
    @Id("svg")
    private Element svgElement;

    public MyTemplate() {
        // 可以在这里访问svgElement，例如获取其属性
        // System.out.println("SVG Element tag: " + svgElement.getTag());
    }

    // 您可以为svgElement添加getter方法，以便在外部访问
    public Element getSvgElement() {
        return svgElement;
    }

    // LitTemplate也可以定义一个模型接口，用于在Java和JS之间传递数据
    public interface MyTemplateModel extends TemplateModel {
        // 定义模型属性
    }
}

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"以便被Java代码注入 -->
              <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内容 -->
                  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
              </svg>
          </div>
      </div>
    `;
  }
}

import com.vaadin.flow.component.Html;
import java.util.List;
import java.util.Random;
import java.util.stream.Collectors;

public class SvgGenerator {

    /**
     * 动态生成一个包含折线图的SVG元素。
     * @param color 折线的颜色
     * @return 包含SVG内容的Html组件
     */
    public Html createChart(String color) {
        Random random = new Random();
        // 生成随机数据点
        List<Integer> data = random.ints(300, -100, 100).boxed()
                .collect(Collectors.toList());

        // 开始构建SVG字符串
        StringBuilder svgBuilder = new StringBuilder();
        svgBuilder.append("<div><svg class=\"uk-animation-stroke\" style=\"width: 100%; height: 100%; --uk-animation-stroke: 100000;\" preserveAspectRatio=\"none\" viewBox=\"0 -100 600 200\">");
        svgBuilder.append("<polyline points=\"");

        // 拼接折线点
        int index = 0;
        for (int number : data) {
            svgBuilder.append(index).append(",").append(number).append(" ");
            index += 2; // 增加X坐标
        }
        svgBuilder.append("\" style=\"stroke-width: 1;fill:none;stroke:").append(color).append(";\"></polyline>");
        svgBuilder.append("</svg></div>");

        // 使用Html组件将SVG字符串渲染到UI
        Html chart = new Html(svgBuilder.toString());
        chart.getElement().getStyle().set("height", "100px"); // 设置组件高度
        return chart;
    }
}

import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.html.Anchor;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.server.StreamResource;
import java.io.ByteArrayInputStream;
import java.nio.charset.StandardCharsets;

@Route("svg-download")
public class SvgDownloadView extends VerticalLayout {

    private String currentSvgContent; // 用于存储当前生成的SVG内容

    public SvgDownloadView() {
        SvgGenerator generator = new SvgGenerator();
        Html chartComponent = generator.createChart("blue");
        add(chartComponent);

        // 假设我们现在想下载这个chartComponent所包含的SVG内容
        // 实际应用中，您会在生成chartComponent的同时保存SVG字符串
        currentSvgContent = generator.createChart("blue").getElement().getOuterHTML(); // 这是一个简化的获取方式，实际应直接保存生成时的字符串

        Button generateAndDisplayBtn = new Button("生成并显示新的SVG", event -> {
            Html newChart = generator.createChart("green");
            replace(chartComponent, newChart); // 更新显示
            currentSvgContent = newChart.getElement().getOuterHTML(); // 更新可下载内容
        });

        // 创建下载链接
        StreamResource svgResource = new StreamResource("chart.svg", () ->
                new ByteArrayInputStream(currentSvgContent.getBytes(StandardCharsets.UTF_8)));
        Anchor downloadLink = new Anchor(svgResource, "下载SVG");
        downloadLink.getElement().setAttribute("download", true); // 强制浏览器下载而不是打开

        add(generateAndDisplayBtn, downloadLink);
    }
}