I need to create an url on icon to download some files. In my controller I do this
$scope.download=download;
function download(id){
console.log("Parameters "+id);
return "......"+id;
}
In my html I do this:
<a title="download" ng-href="{{ download(file.id) }}" target="_blank" ><i
alt="download" class="fa fa-download fa-2x"></i></a>
The problem is the icon doesn't have the url (because is empty) an in my console I don't read "Parameters "+id, It seems that download method is not called. Anyone can help me?
Related
What I want achieve
All I would like to achieve is that implement a file download functionality such as image files, text files etc... using javascript or Jquery.
estimated procedure is like..
① select a file
② click download icon
③ start download file ← here is my problem.
below codes are that I tried.
<a target="_blank" href="{{ f.file }}" download="{{ f.title }}" download><i class="fa fa-download text-secondary border p-2" aria-hidden="true"></i></a>
estimated browser
crome, firefox.
Any of ideas would be great.
※ so far, below code works fine except for image files.
<a href="<your_file_url>" title="{{ f.title }}" download></a>
Thanks.
Try:
<a href="<your_file_url>" title="{{ f.title }}" download></a>
Just be sure you give your file URL in href. You are using ‘"{{f.file}}"’. First check if {{f.file}} redirects to the right file URL.
I am getting a file url from an API
e.g 'http://example.com/sample.jpg'.
This is my current code:
<a href={item.mediaUrl} target="_blank" className="ml-2">
<i className="fa fa-download"></i></a>
But i want to download the file directly without opening the file in new browser tab. I also tried an onClick event on the button:
//HTML
<button onClick={() => this.downloadFile(item.mediaUrl)}>Download</button>
//Function
downloadFile = (url) => {
window.open(url);
}
This is also opening the file in a new browser tab.
How do I download a file from url directly in reactjs, without opening the file in new browser tab?
Did you try adding download attribute to the anchor tag ?
<a href={item.mediaUrl} target="_blank" className="ml-2" download>
<i className="fa fa-download"></i></a>
Try removing target="_blank" from your initial code.
i.e.
<a href={item.mediaUrl} className="ml-2" download>
<i className="fa fa-download"></i></a>
Are you using react router ? If so can you try below
import { Link } from 'react-router-dom';
<Link to=`/${item.mediaUrl}` onClick={e => e.preventDefault();}>
<i className="fa fa-download"></i></Link>
Link desc Here
i´ve got the following code in my website:
<a class="jr-btn jr-btn-success " data-action="sendStep"> Senden </a>
I want to do the data-action called by a javascript-function. Is it possible?
Yes it is possible, and you would use the .getAttribute('data-action') to get the value
console.log(document.getElementsByClassName("jr-btn-success")[0].getAttribute('data-action'))
<a class="jr-btn jr-btn-success " data-action="sendStep"> Senden </a>
I've a situation where a user need to copy (click copy-to-clipboard icon) a link, however I've multiple dynamic links on a single page.
I've found the solution on the following post but I don't know a way to pass clicked icon ID to function as parameter and get the link copied to clipboard.
Click button copy to clipboard using jQuery
<i class="fa fa-link pull-right" id"copyToClipboard1"></i>
<i class="fa fa-link pull-right" id"copyToClipboard2"></i>
<i class="fa fa-link pull-right" id"copyToClipboard3"></i>
I went through the following post here in order to pass element ids to the function but no use as I just started crawling on jQuery path.
jQuery passing element ID into jquery statement?
Thanks in advance.
I don't have enough rep point therefore posting a new question [duplicate].
Trying to add a link in a Bootstrap popover (to go to a "Help" page). Seen all sorts of complicated solutions of getting a link inside a popover but someone suggested a simple onclick window.open. Seemed an interesting solution BUT I am in double/single quote hell.
I am using phpStorm which does a pretty good job highlighting errors. What I am trying is:
<i class="explain fa fa-question-circle text-primary"
data-toggle="popover" data-trigger="focus" tabindex="0" title="Popover title"
data-content="And here's some amazing content. It's very engaging.<a href='#'
onclick='window.open("http://www.google.com/");' title='test add link'>
link to content</a> Right?"></i>
Here is the original I copied:
link
My problem is that when I switch single to double I get an error at the initial " of ("http://www.google.com/"); and have an unclosed tag.
What am I not understanding re this call please.
Try using " within the HTML attribute:
<i class="explain fa fa-question-circle text-primary"
data-toggle="popover" data-trigger="focus" tabindex="0" title="Popover title"
data-content="And here's some amazing content. It's very engaging.<a href='#'
onclick="window.open('http://www.google.com/');" title='test add link'>
link to content</a> Right?"></i>
Compare here: How to properly escape quotes inside html attributes?
You need to include data-html="true" along with your other data-*
Here is the jsFiddle