Is there any fallback available for download attribute of Anchor tag to deal with IE ?
caniuse.com says it's not supported in any version if Internet Explorer.
Solution without JavaScript is preferable.
As of now, the download attribute is only supported in Chrome and Firefox. You could detect whether the attribute is supported using JavaScript.
var a = document.createElement('a');
if(typeof a.download != "undefined")
{
// download attribute is supported
}
else
{
// download attribute is not supported
}
If you are dealing with text files then you could take a look at Downloadify, which is a javascript + Flash library that enables the creation and download of text files without server interaction. Check out this Demo that uses Downloadify.
Related
I am using a download attribute in my link:
<a style="color:white" download="myimage" href="images/myimage.jpg">Download image</a>
It is working very well in almost all browsers. This means, if I click on the link the image is automatically downloaded. I tested it in safari 10.1.2 on my mac and it is working fine.
But on my friends mac who is working with safari 10.0.3 it is not working. He is saying that the image is only opening in a new window but not downloading.
Why is this happening and what can I do to make it work anywhere?
According to https://developer.apple.com/library/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_10_1.html, it was added in Safari 10.1:
HTML5 Download Attribute
The download attribute for anchor elements
indicates that the link target is a download link that downloads a
file, instead of a navigational link. When you click a a link with the
download attribute, the target is downloaded as a file. Optionally,
the value of the download attribute provides the suggested name of the
file.
It doesn't seem to be available in iOS Safari 11.1 though from my own testing, which has me a bit confused. I'd expect them to be equal in standards support, based on their similar version numbering.
try this code:
var element = document.createElement('a');
var clearUrl = base64.replace(/^data:image\/\w+;base64,/, '');
// element.setAttribute('href', 'data:attachment/image' + base64);
element.setAttribute('href', 'data:application/octet-stream;base64,' + encodeURIComponent(clearUrl));
element.setAttribute('download', 'filename.jpg');
document.body.appendChild(element);
element.click();
document.body.removeChild(element)
This is work for me in safari version 10.0.3
Please take a look at https://www.w3schools.com/TagS/tag_a.asp
Scroll down to attributes, and you will see that the DOWNLOAD attribute is only supported by HTML5, which, as it seems, your friend's version of Safari does not support. I recommend updating the program.
Alternatively, you can right-click on the image, then click Save As..., then download it that way.
#Jarla
I have an anchor tag that points to an encoded image and includes the download attribute. The goal is to allow the user to download the data URI (image) to disk simply by clicking on the link.
Example:
<a download="foo" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGElEQVQYlWNkYGD4z0AEYCJG0ahC6ikEAKYXAROlAhdFAAAAAElFTkSuQmCC">
Download image
</a>
There are two things going on here that I need to check for browser support:
Whether or not the browser supports the download attribute
Whether or not the browser supports the href=data:
The way I check for support for the download attribute is:
document.createElement('a').download === undefined;
However, I don't know how to detect if the browser supports the download if/when the href points to an url that uses the data: URI scheme.
I know that MS Edge doesn't support the example code above (fiddle here).. so I'm sure that there are other modern browsers that don't support it either. - And I don't want to check for the browser type (eg. if the navigator.userAgent contains 'Edge').
I've an image that I want to download on IE. After looking at Google and several stackoverflow questions I found that the best solution for the other common browsers is the HTML5 download attribute:
<a href="/barImage.jpg" target="_blank" download>Foo</a>
But this attribute is not currently supported on IE. And it just opens a new tab with the image on IE (Because it's a known file extension)
Is there any way to force the download of an image file just using html and without zipping it or any other method of this kind?
Please don't indicate javascript libraries.
I think you will not get far without JS.
Microsoft supports this tag from the Edge browser. Do you really need it for older versions?
I just read something else. You can try to fill the download attributes with a filename, so:
... download="sample.png" ...
I found this Codesnippet (force browser to download image files on click):
var link = document.createElement('a');
link.href = 'images.jpg';
link.download = 'sample.jpg';
document.body.appendChild(link);
link.click();
But I´m not sure, if this is correct...
I´m trying to use the 'download' attribute of a href to rename a file without extension, but it doesn't work.
<a href="/fileWithoutExtension" download="newName.pdf">
I tried with IE, Chrome and FF.
Any thoughts?
Thanks,
The download attribute only works in Chrome 14+ and Firefox 20+ so this May explain why you are not getting this to work. I suggest you do not use it as it is not yet widely used. Prefer some other alternatives.
You can check that your attribute is supported with this javascript code, taken from here : http://www.webdesignerdepot.com/2013/04/how-to-use-the-download-attribute/
var a = document.createElement('a');
if(typeof a.download != "undefined")
{
// download attribute is supported
}
else
{
// download attribute is not supported
}
If you want to change the filename then just use a server-sided PHP script:
<?php
header('Content-type: application/pdf');
header('Content-Disposition: attachment; filename="newFile.pdf"');
echo file_get_contents("your_original_file");
?>
and make your link like this
The code I'm trying to use is
data:text/html,
<body contenteditable style="font: 2rem/1.5 monospace;
max-width:60rem;
margin:0 auto;
padding:4rem;">
I found it on a webiste. I'm suppose to just place it on the URL and hit enter but only for Chrome, Firefox and Opera. It won't work on IE. How can I make a notepad on IE?
More info:
Im using a work pc and I can't access any website nor programs. No file explorer, right click context menu, only has IE.
You can try using the javascript engine to create a similar execution.
From the URL bar:
javascript:window.document.write('<body contenteditable style="font: 2em/1.5 monospace;max-width:60em;margin:0 auto;padding:4em;">');
If you copy and paste you will need to manually type javascript: in front of it since the browser trims that part of on paste.
If you want to execute a new window as an editor then try this:
<script>
function myFunction() {
var myWindow = window.open("", "MyEditorWindow");
myWindow.document.write("<body contenteditable style=\"font: 2em/1.5 monospace;padding:40px;\">");
}
</script>
Check out this jsFiddle example
Data URIs: Internet Explorer does not support data URIs. Data URIs For security reasons, Data URIs are restricted to downloaded resources. Data URIs cannot be used for navigation, for scripting, or to populate frame or iframe elements.
REM CSS: The CSS3 rem, which is always relative only to the root html element, is too new to rely on. As of July 2012, around 75% of all browsers in use support the rem.
Reference Link:
Data URI scheme
Contenteditable
CSS3 Rem Attribute
Data URI Mozilla
Conclusion:
Please refer to the first link to achieve this as IE not started supporting it.
IE doesn't support Data URI tag. Hence you have to use it in javascript or in html tag.
IE doesn't support REM CSS3 Attribute rem as a unit. Hence you have to use em or px instead.