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
Related
in this piece of HTML code
PARTECIPA
the opening of the website in the Microsoft Edge browser is indicated if installed on the device.
Can anyone help me? I would like the site to open in Google Chrome and not in Edge.
How should I edit this HTML?
To open the link using the Chrome browser instead of Microsoft Edge, you can change the value of href attribute like this: PARTECIPA. Assuming that Chrome browser is installed, that should open the Chrome browser.
Problem:
If Edge is not installed on the device (mob, desk or tab) it doesn't
work
In this case, it's best to simply use a standard URL without specifying a specific browser, like this. PARTECIPA. In addition, the "googlechrome:" protocol is not a standardized protocol and probably may not work in all devices. So, you can use a standardized URL like the code snippet I posted above and let the users device choose.
Do you know if instead of chrome I can specify "default browser"
Example PARTECIPA or
something similar?
There is no standard protocol for specifying the default browser. So, best approach is to simply use a standard URL without specifying a specific browser. But if you really want to use special web protocols inside hypertext links to force web pages or files to open with particular browsers on Windows or iOS, place browser-name before the hypertext reference link.
Check this:
Open in Google Chrome
Open in Microsoft Edge
Open in Mozilla Firefox
Open in Apple Safari
Open in Opera
This function does not work!
A similar example is for IOS, which works in the following way
Example :
PARTECIPA
Google has official documentation on the Chrome iOS app’s URI scheme on its developer website.
Simply replace http with googlechrome and https with googlechromes. This means:
http://www.google.com/ becomes googlechrome://www.google.com/
https://apple.stackexchange.com/ becomes googlechromes://apple.stackexchange.com/
Previously, it supported an x-callback-url of googlechrome-x-callback://. This allowed the calling app to indicate its name and URI scheme to Chrome, which would show a back button in the address bar that closes the tab and invokes the specified URI. This feature was removed a few years ago when iOS 9 added the “Back to …” button in the status bar (but the URI scheme still works).
In Safari 11/12, I have an tag with href="data:" and attribute "download" to save the file when the link is clicked.
<!DOCTYPE html>
<html><body>
<a href="data:text/plain;charset=utf-8,Hello" download="hello.txt">
Click me
</a>
</body></html>
This works fine in Chrome and Firefox, and also in an unpinned tab in Safari. Clicking on the link downloads the text "Hello" into a new file called hello.txt. However, in a pinned tab in Safari, the download attribute seems to be ignored and Safari opens the data in a new tab.
To see this you need to serve the above HTML code from a web server. If you just save the file and open it with a "file://" URL, it works as expected.
I have tried using a Blob instead but the behaviour was the same.
I have tried changing the mimeType to "application/octet-stream" which was a suggestion I found to a similar question. This does cause the data to be downloaded, but the filename is always "unknown.txt". This isn't suitable as I need to have control over the filename and extension (it's not hello.txt!)
As an extra note, the behaviour is actually different in Safari 11 and 12 but neither is working properly. In 11, the data is opened in a new tab. In 12, it opens a new tab but shows an error opening the data.
This looks like a bug in Safari to me. Can anyone suggest a workaround?
Thanks
It appears it is a well known bug and the download attribute is not yet supported by Safari (webkit).
https://bugs.webkit.org/show_bug.cgi?id=167341
https://caniuse.com/#feat=download
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 access a document template (.dot) that's linked from a company portal, using chrome. When I click on the link, the browser shows me a bunch of garbage. Is there a setting to force chrome to download this type of file and open it in word?
Example of garbage:
For HTML5:
<a href='file.dot' download>Click here to download</a>
'Download' attribute documentation can be read at:
http://www.w3schools.com/tags/att_a_download.asp
Supported since chrome 14.0.
EDIT: However this is controlled by the site. As for client-side settings, i think only changing the .DOT extension to match Word files in Windows, and perhaps even that won't work if chrome uses its own list.
In any case, you can right-click and "Save file as...", but yes, it's annoying.
Tried this:
Download Your Foo
Chrome unfortunatelly completely ignores the download attribute.
What can I do? Ideally to make it cross-browser...
Thanks
Have you tested this on any other web browsers.
According to w3schools here, it is an HTML5 attribute and internet explorer and safari do not support it. So, if you are looking for cross-browser, this probably isn't the best solution.
Also the link you have composed is wrong, if you downloaded google.com it points to index.html(I checked) .
I tried <a href="http://www.google.com" download>Here</a> and opened it in the latest chrome and it downloaded index.html. So if you need google chrome compatibility do a download attribute with "[your choice].html".
If you would like cross-browser compatibility I suggest you use php to change the headers then echo google's source. If you are unfamiliar with php go to
here