Vaadin应用中处理与下载动态SVG内容的指南

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

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

    // 使用 @Id 注解将模板中 id 为 "svg" 的元素映射到此字段
    @Id("svg")
    private Element svgElement; // 可以通过 svgElement 访问到模板中的SVG元素

    public MyTemplate() {
        // 可以在构造函数或后续方法中操作 svgElement
        // 注意：此 Element 对象代表服务器端对模板中元素的引用
        // 如果客户端JS动态修改了SVG内容，这些修改不会自动同步到此 Element 对象
        // System.out.println("SVG Element tag: " + svgElement.getTag());
    }

    // 提供一个方法来获取 SVG 元素的 outerHTML
    // 注意：此方法获取的是模板中定义的原始 outerHTML，而非客户端动态修改后的
    public String getSvgOuterHtmlFromTemplate() {
        // 对于LitTemplate，直接获取Element的outerHTML可能无法得到完整的SVG字符串
        // 因为Flow不会自动将所有子节点或属性同步。
        // 如果需要获取完整的HTML，可能需要通过客户端JS调用。
        // 但对于初始定义的SVG，可以通过其他方式获取或在服务器端重新构建。
        return svgElement.getOuterHTML(); // 实际效果可能不如预期，见注意事项
    }
}

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 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 com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.server.StreamResource;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.server.StreamRegistration;
import com.vaadin.flow.server.VaadinSession;
import com.vaadin.flow.component.UI;

import java.io.ByteArrayInputStream;
import java.nio.charset.StandardCharsets;
import java.util.List;
import java.util.Random;
import java.util.stream.Collectors;

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

    private String currentSvgContent; // 用于存储当前生成的SVG内容，以便下载

    public SvgDownloadView() {
        setAlignItems(Alignment.CENTER);
        setJustifyContentMode(JustifyContentMode.CENTER);
        setSizeFull();

        // 初始生成并显示一个SVG图表
        Html chartComponent = createChart("blue");
        add(chartComponent);
        chartComponent.getElement().getStyle().set("height", "300px").set("width", "600px");

        // 添加一个下载按钮
        Button downloadButton = new Button("下载 SVG");
        downloadButton.addClickListener(event -> {
            if (currentSvgContent != null && !currentSvgContent.isEmpty()) {
                // 创建一个StreamResource用于下载
                StreamResource resource = new StreamResource("chart.svg",
                        () -> new ByteArrayInputStream(currentSvgContent.getBytes(StandardCharsets.UTF_8)));

                // 创建一个临时链接并点击它来触发下载
                // 注意：为了在浏览器中触发下载，通常需要通过JavaScript创建一个临时a标签并模拟点击
                String downloadUrl = UI.getCurrent().getSession().getResourceRegistry().registerResource(resource).getURL();
                UI.getCurrent().getPage().open(downloadUrl, "_blank"); // 打开新标签页触发下载
            }
        });
        add(downloadButton);
    }

    /**
     * 在服务器端动态生成SVG图表内容并返回Html组件。
     * 同时将生成的SVG字符串存储到 currentSvgContent 变量中。
     *
     * @param color 折线的颜色
     * @return 包含SVG内容的Html组件
     */
    private Html createChart(String color) {
        Random random = new Random();
        // 生成随机数据点
        List<Integer> data = random.ints(300, -100, 100).boxed()
                .collect(Collectors.toList());

        // 使用StringBuilder高效拼接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\"><polyline points=\"");

        int index = 0;
        for (int number : data) {
            svgBuilder.append(index).append(",").append(number).append(" ");
            index += 2;
        }
        svgBuilder.append("\" style=\"stroke-width: 1;fill:none;stroke:").append(color)
                .append("\"></polyline></svg></div>");

        currentSvgContent = svgBuilder.toString(); // 存储生成的SVG内容
        return new Html(currentSvgContent); // 使用Html组件渲染SVG
    }
}