Question

我正在尝试创建一个HTML按钮，该按钮将在新标签页中以base64字符串的形式打开图像。我制作了一个适用于静态图片的试用版：

<button type = "button" id = "submit_btn" class="contact100-form-btn">
    <a href="static/static_filename.png" class="contact100-form-btn" target="_blank">
        Download
    </a>
</button>

现在，我想动态地执行操作（该应用程序涉及每个用户创建一个新图像，因此无法使用单个静态文件名提供服务）。我的第一次尝试：

<button type = "button" id = "submit_btn" class="contact100-form-btn">
    <a href="data:image/png;base64,{img_io}" class="contact100-form-btn" target="_blank">
      Download
    </a>
</button>

其中img_io是base64编码的图像字符串。

单击按钮不会执行任何操作，并在Chrome开发者控制台中提示消息Not allowed to navigate top frame to data URL。我尝试明确添加下载：

<button type = "button" id = "submit_btn" class="contact100-form-btn">
    <a download="filename.png" href="data:image/png;base64,{img_io}" class="contact100-form-btn" target="_blank">
      Download
    </a>
</button>

这将导致图像在Chrome上成功下载，但在Firefox上不起作用。有谁知道如何在新标签页中打开base64图像字符串？还是作为一个后备选项，可以在浏览器中使用直接创建直接下载选项？最好使用纯HTML，因为它是基于python的Web应用程序的一部分，而我几乎不了解Javascript。

谢谢

HTML-如何在新标签页中打开base64图像字符串

0 个答案: