Data URI link <a href="data: doesn't work in Microsoft Edge
Solution 1
As of 2020, the new Microsoft Edge built on Chromium supports navigating to data URIs in the address bar like the other Chromium-based browsers. Neither IE nor Microsoft Edge Legacy support this feature; MSDN claims that this is for security reasons.
The only solution for older Microsoft browsers is to link, using a scheme that is supported such as file:// or http://, to some resource that contains the content.
Interestingly enough, the oldest 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") or, in the case of the new Microsoft Edge, are treated as invalid edge:// URIs.
Solution 2
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();
}
});
Solution 3
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>
Related videos on Youtube
Limon Monte
Has SweetAlert2 helped you create an amazing application? You can show your support by making a donation: https://github.com/sponsors/limonte https://www.paypal.me/limonte
Updated on April 01, 2021Comments
-
Limon Monte about 3 years
This simple code works perfectly everywhere except Microsoft Edge:
<a href="data:text/plain;charset=utf-8,Test">link</a>
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
-
Admin over 8 yearsI did some further testing and it seems like there was never a definition for data: in internet explorer so most likely not in MS Edge as well, tested back back to internet explorer 9, on the contrary there has always been a definition for data: in chrome, tested back to chrome 1.0
-
lilezek over 8 yearsDoes it work for images? Does an image written in base64 loads in Microsoft-Edge?
-
CBroe over 8 years
-
Limon Monte over 8 years@lilezek image written in base64 works in <img> tag, but still does not work in <a> tag, jsfiddle.net/kkqLze7e/4
-
-
Limon Monte over 8 years"for security reasons" - that explains all :) Thanks for that link, I've asked another question about detecting is data URI in links is supported in browser: stackoverflow.com/q/33197625/1331425 may be you can help with that. Thank you!
-
myf over 8 yearsRaised Spartan Uservoice "idea" for this issue: windows.uservoice.com/forums/285214-microsoft-edge/suggestions/…
-
BoltClock over 8 years@myf: Still wish Spartan was more than just a codename. Thanks for posting the suggestion.
-
hhzhu over 6 yearsThis is good. But not work for downloading the image with the "download" attr in the href tag.
-
Tony McCreath about 4 yearsThis got me in the right direction. I ended up avoiding the link entirely and just calling navigator.msSaveBlob(new Blob([content], { mime: type }), filename);