数据 URI 链接 <a href="data: 在 Microsoft Edge 中不起作用

Question

这个简单的代码在除 Microsoft Edge 之外的任何地方都能完美运行：

<a href="data:text/plain;charset=utf-8,Test">link</a>

[JSFiddle]

在 Microsoft Edge 中，我收到“这很奇怪...Microsoft 找不到此页面”错误：

Mozilla documentation 中的示例也不能得到相同的结果。

这是 Edge 控制台的输出：

当打开一个新的边缘窗口时发生此错误，在新选项卡上它将data:text/plain;charset=utf-8,Test 作为搜索查询输入到默认搜索引擎中。

Microsoft Edge 似乎没有data: 的定义

有人知道解决办法吗？

---

更新：不幸的是，似乎没有办法在 IE/Edge 的链接中使用数据 URI。我创建了有关在链接中检测数据 URI 支持的相关问题：Detect data URI in links support with Modernizr

Answer 1

自 2020 年起，基于 Chromium 构建的新 Microsoft Edge 支持导航到地址栏中的数据 URI，就像其他基于 Chromium 的浏览器一样。 IE 和 Microsoft Edge Legacy 都不支持此功能； MSDN 声称这是for security reasons。

旧版 Microsoft 浏览器的唯一解决方案是使用 支持的方案（例如 file:// 或 http://）链接到包含内容的某些资源。

有趣的是，最古老的 IE 版本（我说的是 6 之前的版本）在 about: URI 方案中支持数据 URI 的前身，尽管这种方式只支持 HTML。这些 URI 现在不再起作用，只是重定向到“取消导航”（以前是“取消操作”），或者在新 Microsoft Edge 的情况下，被视为无效的 edge:// URI。

Answer 2

由于 IE 和 Edge 确实支持以数据 URI 作为源的 <img> 标签，因此您可以使用 javascript 来伪造指向图像的链接以写入文档：

<a href="javascript:document.write('<img src=data:image/png;base64,iVBORw0KGgoAA
AANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0l
EQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6
P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC />')">link</a>

Answer 3

您可以尝试使用navigator.msSaveBlob 来下载 IE/Edge 中的数据 URI：

var a = document.getElementsByTagName('a')[0];
a.addEventListener('click', function (e) {
    if (navigator.msSaveBlob) {
        var bytes = atob(a.href.split(',')[1]), array = [];
        for(var i = 0; i < bytes.length; i++) array.push(bytes.charCodeAt(i));
        navigator.msSaveBlob(new Blob([new Uint8Array(array)], {mime: "text/plain"}), "file.txt");
        e.preventDefault();
    }
});