数据URI链接<a href="data: doesn&#39;t work in Microsoft Edge

Question

<p>This simple code works perfectly everywhere except Microsoft Edge:</p> <pre><code><a href=" data:text="" plain;charset="utf-8,Test">link</a> </code">

[JSFiddle]

在Microsoft Edge中我得到“那很奇怪......微软找不到这个页面”错误：

来自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

IE和Microsoft Edge都不支持导航到数据URI。 MSDN声称这是for security reasons。

唯一的解决方案是使用 支持的方案（例如file：//或http：//）链接到包含内容的某个资源。

有趣的是，旧版本的IE（我说的是6岁以上）支持about：URI方案中数据URI的前身，尽管这种方式只支持HTML。这些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();
    }
});