Data URI链接在Microsoft Edge浏览器中无法使用。

Question

这段简单的代码在Microsoft Edge之外的所有地方都运行得非常完美:

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

[JSFiddle]

在使用Microsoft Edge时，我收到了“很奇怪...Microsoft找不到这个页面”错误：

来自Mozilla文档的示例也无法工作，结果相同。

以下是Edge控制台的输出：

当打开新的Edge窗口时，出现此错误，在新标签中它将data:text/plain;charset=utf-8,Test作为搜索查询输入到默认搜索引擎中。

看起来Microsoft Edge没有data:的定义。

有人知道解决方案吗？

---

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

- Limon Monte

---

我进行了进一步的测试，似乎在Internet Explorer中从未定义过data：，因此很可能在MS Edge中也没有定义。 我已经回溯测试到Internet Explorer 9，相反，在Chrome中一直有data：的定义，测试回溯到Chrome 1.0。 - user5166622

它适用于图像吗？以 base64 写入的图片能否在 Microsoft Edge 中加载？ - lilezek

可以使用这个网站来查询浏览器是否支持Data URI（数据统一资源标识符）方案。 - CBroe

@lilezek 在 base64 编码的图像可以在 <img> 标签中正常显示，但在 <a> 标签中仍然无法正常显示，https://jsfiddle.net/kkqLze7e/4/ - Limon Monte

Answer 1

截至2020年，基于Chromium内核的新版Microsoft Edge支持在地址栏中导航到数据URI，就像其他基于Chromium的浏览器一样。IE和Microsoft Edge Legacy都不支持此功能；MSDN声称这是出于安全原因。

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

有趣的是，IE的最早版本（指的是6以前）支持about：URI方案中的数据URI先驱，但只有HTML支持。这些URI今天不再起作用，而是重定向到“取消导航”（以前是“取消操作”），或者在新版Microsoft Edge的情况下被视为无效的edge://URI。

- BoltClock

---

出于安全考虑 - 这就解释了一切 :) 谢谢你提供的链接，我又提了一个关于在浏览器中检测数据URI是否支持的问题：https://dev59.com/dZDea4cB1Zd3GeqPYTXi 也许您可以帮忙。谢谢！ - Limon Monte

提出了斯巴达用户反馈的“想法”来解决这个问题：https://windows.uservoice.com/forums/285214-microsoft-edge/suggestions/10261974-support-data-uri-protocol - myf

@myf：仍然希望Spartan不仅仅是一个代号。感谢您发表建议。 - BoltClock

Answer 2

您可以尝试在IE/Edge浏览器中使用navigator.msSaveBlob来下载数据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();
    }
});

- niutech

---

这让我朝着正确的方向前进。最终，我避免了链接，并只是调用navigator.msSaveBlob(new Blob([content], { mime: type }), filename);。 - Tony McCreath

谢谢，这段代码非常有用。我只需要更改MIME类型和文件名即可。 - Nik

Answer 3

由于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>

- Matthew Hodges

---

这很好。但是无法使用href标签中的“download”属性下载图像。 - hhzhu