Svelte组件中点击按钮下载SVG元素失效问题求助

你在静态HTML中可用的Blob下载方案，移植到Svelte后失效，核心原因是动态创建的<a>标签未挂载到DOM中，部分浏览器会阻止此类无DOM挂载的下载操作，另外直接用document.getElementById操作DOM也不符合Svelte的最佳实践。下面提供两种修复方式：

方式一：修改现有DOM操作逻辑 #

只需在创建<a>标签后先将其添加到页面DOM，触发点击后再移除，即可解决下载不触发的问题：

<script>
    const sizes = [20, 50, 90];
    
    function download(id) {
        const svg = document.getElementById(id);
        const blob = new Blob([svg.outerHTML], {type: 'image/svg+xml'});
        const link = document.createElement('a');
        link.href = URL.createObjectURL(blob);
        link.download = `File name ${id}.svg`;
        
        // 新增：将链接添加到DOM
        document.body.appendChild(link);
        // 触发下载
        link.click();
        // 下载完成后移除链接
        document.body.removeChild(link);
        // 释放URL对象，避免内存泄漏
        URL.revokeObjectURL(link.href);
    }
</script>

{#each sizes as s}
<p>
    <button on:click={() => download(s)}>Download SVG</button>
    <br>
    <svg id={s} width="200" height="200" xmlns="http://www.w3.org/2000/svg">
        <ellipse cx="100" cy="100" rx={s} ry={s*0.7} fill="orange" stroke="black"/>
    </svg>
</p>
<hr/>
{/each}

方式二：使用Svelte的bind:this（推荐） #

避免直接操作DOM，用Svelte的绑定特性直接获取每个SVG元素，代码更优雅且符合框架设计：

<script>
    const sizes = [20, 50, 90];
    // 存储每个SVG元素的引用
    const svgElements = new Map();
    
    function download(size) {
        const svg = svgElements.get(size);
        if (!svg) return;
        
        const blob = new Blob([svg.outerHTML], {type: 'image/svg+xml'});
        const link = document.createElement('a');
        link.href = URL.createObjectURL(blob);
        link.download = `File name ${size}.svg`;
        
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        URL.revokeObjectURL(link.href);
    }
</script>

{#each sizes as s}
<p>
    <button on:click={() => download(s)}>Download SVG</button>
    <br>
    <!-- 绑定当前SVG元素到svgElements Map -->
    <svg bind:this={svgElements.set(s, $el)} width="200" height="200" xmlns="http://www.w3.org/2000/svg">
        <ellipse cx="100" cy="100" rx={s} ry={s*0.7} fill="orange" stroke="black"/>
    </svg>
</p>
<hr/>
{/each}

补充说明：

• 两种方案都添加了URL.revokeObjectURL(link.href)，用于释放创建的URL对象，避免内存泄漏。
• 方式二中使用Map存储每个尺寸对应的SVG元素引用，比getElementById更可靠，尤其在复杂组件渲染场景下。

内容的提问来源于stack exchange，提问作者user21941556