html 'download' attribute opens up a new page instead of downloading
According to caniuse report:
Chrome 65 and above only supports same-origin download links.
Firefox only supports same-origin download links
The same-origin means that you have to actually download the image or whatever to your local computer if you're developing with your own computer and use <a href="./pic/[Pic_Name].[Pic_Ext]" class="btn btn-outline-success btn-sm" target="_blank" download>Download</a>
And if you are developing with localhost, just omit the . before the /pic. Same for a remote server.
Also, if you're using an outdated version of the browser, the download attribute never works. Check caniuse.com for more...
How to download file using anchor tag a
In HTML5, in most browsers you can add a 'download' attribute to the a
element.
for example:
<a href="http://www.example.com/index.html" download>Download</a>
Based on this question. How can I create download link in html?
AngularJS prevents HTML5 download link from starting a download
use ng-href
instead of href
<li><a ng-href="/api/v1/rna/{{ rna.upi }}.fasta" download="{{ rna.upi }}.fasta">FASTA</a></li>
Download attribute on A tag not working in IE
Internet Explorer does not presently support the Download
attribute on A
tags.
See http://caniuse.com/download and http://status.modern.ie/adownloadattribute; the latter indicates that the feature is "Under consideration" for IE12.
How to trigger a file download when clicking an HTML button or JavaScript
For the button you can do
<form method="get" action="file.doc">
<button type="submit">Download!</button>
</form>
How should I link a CSS file for the subdomain from the main domain?
When you have a case that the same source code will be used at different nesting levels (like /index.htm and /hire/index.htm or different domains you might want to consider the HTML BASE tag.
<base href="http://joeisaacson.com">
<link rel="stylesheet" href="/css/style.css" type="text/css">
This will fetch the CSS from http://joeisaacson.com/css/style.css
regardless of where the HTML page is served as long as you realise it will do this for all external resources (images, css, js, etc).
Just be sure BASE
tag is inside HEAD
and comes before any linked content. You also do not close this tag in HTML (so no </base>
or <base />
is expected)
Related Topics
Css :After Not Adding Content to Certain Elements
Z-Index Is Canceled by Setting Transform(Rotate)
Center an Element in Bootstrap Navbar
How to Get Ff 33.X Flexbox Behavior in Ff 34.X
Remove Blue Border from CSS Custom-Styled Button in Chrome
How to Remove Firefox'S Dotted Outline on Buttons as Well as Links
Pure CSS to Make Font-Size Responsive Based on Dynamic Amount of Characters
How to Make an HTML Link Look Like a Button
What Does an Asterisk (*) Do in a CSS Selector
Nth-Child Doesn't Respond to Class
Can the :Not() Pseudo-Class Have Multiple Arguments
Css Scrollbar Style Cross Browser
Detect If an Input Has Text in It Using CSS - on a Page I Am Visiting and Do Not Control
Add a CSS Border on Hover Without Moving the Element
Difference Between Style = "Position:Absolute" and Style = "Position:Relative"