代码之家 › 专栏 › 技术社区 › furynerd

如何使用超链接在浏览器中直接打开base64 svg

href base64 hyperlink html

-1

furynerd · 技术社区 · 10 月前

我得到了一个base64 svg img和html链接,比如:

<a href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0..." target="_blank">img</a>

但是当我点击 img 链接,一个新窗口(看起来像空白)闪烁并很快消失,仅此而已。

如果添加“download”属性,如下所示:

<a href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0..." target="_blank" download>img</a>

svg img可以成功下载并在浏览器中打开。

如果直接粘贴 data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0... 在浏览器url栏中,可以按预期直接打开svg。

我该如何使用 <a> 正确标记以直接在浏览器中打开base64 svg?

非常感谢。

1 回复 | 直到 10 月前

nabin sademba 10 月前

使用iframe或嵌入标签
您可以使用js在新选项卡中打开它,如下所示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG Test</title>
</head>
<body>
    <a href="javascript:void(0);" onclick="openSVG()">img</a>

    <script>
    function openSVG() {
        // Your Base64 encoded SVG data
        const svgData = atob("PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+CiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgcj0iNDQiIHN0eWxlPSJmaWxsOnJlZDsiIC8+Cjwvc3ZnPg==");

        // Create a Blob from the SVG data
        const blob = new Blob([svgData], { type: 'image/svg+xml' });
        const url = URL.createObjectURL(blob);

        // Open the Blob URL in a new window
        window.open(url, '_blank'); // No 'noopener,noreferrer' here
    }
    </script>
</body>
</html>