Data URI link <a href="data: doesn't work in Microsoft Edge

问题

This simple code works perfectly everywhere except Microsoft Edge:

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

[JSFiddle]

In Microsoft Edge I'm getting "That's odd...Microsoft can't find this page" error:

Examples from Mozilla documentation also do not working with the same result.

Here's the output from Edge console:

This error occurs when opening a new edge window, on new tabs it inputs data:text/plain;charset=utf-8,Test as search query into the default search engine.

It seems like Microsoft Edge has no definition for data:

Does anyone know a solution to this?

---

Update: unfortunately, it seems that there's no way to use data URI in links in IE/Edge. I've created related question about detecting data URI support in links: Detect data URI in links support with Modernizr

回答1:

Neither IE nor Microsoft Edge support navigating to data URIs. MSDN claims that this is for security reasons.

The only solution is to link, using a scheme that is supported such as file:// or http://, to some resource that contains the content.

Interestingly enough, older versions of IE (I'm talking older than 6) supported a precursor to data URIs in the about: URI scheme, though only HTML was supported this way. Those URIs no longer work today and simply redirect to "Navigation canceled" (previously "Action canceled").

回答2:

Since IE and Edge do support <img> tags with a data URI as the source, you can fudge a link to an image using javascript to write to the document:

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

回答3:

You can try using navigator.msSaveBlob in order to download the data URI in IE/Edge:

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();
    }
});

来源：https://stackoverflow.com/questions/33154646/data-uri-link-a-href-data-doesnt-work-in-microsoft-edge