主页 / coding / 问题 / 78873624
Accepted
furynerd
Asked: 2024-08-15 12:16:48 +0800 CST

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

  • 772

我得到了一个 base64 svg 图片和 html 链接，例如：

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

但是当我单击img链接时，一个新窗口（看起来像空白）闪烁并很快消失，仅此而已。

如果添加'下载'属性，例如：

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

非常感谢。

html

1 个回答

  1. Best Answer
    1. 使用 iframe 或 embed 标签
    2. 您可以使用 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>

    在此处输入图片描述

    当你点击 img 时

    在此处输入图片描述

    • 1

相关问题