Download Image with url React - javascript

Im working on a picture gallery.
Im trying to make a mechanism that allows user to press button and download image.
I have a url to the image. How can I do this?

Use download attribute of link tag:
<a href="path-to-image.jpg" download>
<img src="path-to-image.jpg" />
</a>
Also, take care as this post statement while using download attribute.

Related

Download button in react to csv link not working within material-ui table [duplicate]

Why is this not working:
download.html
download
The jsplogin.jar file is in the same folder has the download.html file.
when I click the download link the file jsplogin.jar should download
but its trying to open the file in the browser.
when I right clicked on the link and selected "save link" nothing is happening.
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?
Use the "download" attribute:
<a href="jsplogin.jar" download>download</a>
The download attribute didn't work for me, but this did:
Download
The opens a new tab but downloads the file and closes the tab once it realizes it's not a file type it should render. In my case it was a .csv, I did not test with .jar but i imagine you'd get the same result.

HTML video automatically download

I want to use javascript to automatically download a video file given a url that contains the link to the video. So far I have tried the approach of using <a href='somelink' download> but when I click on the link it will open a new tab containing the video instead of downloading it. Is there a way to write a script that automatically does the job that the video tag control options does? Like the picture shown below, can I write javascript to trigger the event on the download button? Thanks.
This might helpful.
document.getElementById("myCheck").click();
<a download="name_of_downloaded_file" href="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4" id="myCheck"> Clicking on this link will force download the file</a>
Use target=”_blank” along with anchor tag with download option to prevent streaming files directly in browsers on desktop and android or iOS (iPhone) devices.
<a href='somelink' download target=”_blank”>
Here is the reference

HTML hyperlink to a specific page of a pdf file

Consider a very simple link to a pdf file in HTML:
<a target="_blank" href="mypdf.pdf">Link to pdf</a>
Of course, when the user clicks on the link, the pdf is open and the first page is shown in the browser.
Is there a way create a link to a specific page of the pdf? I was wondering if there is some command like this:
<a target="_blank" href="mypdf.pdf#11">Link to page 11 of the pdf</a>
or some trick based on Javascript.
I found answer on adobe forum https://forums.adobe.com/thread/2345594.
After # you should write something like #page=3 for example, to move automatically to page 3.
The following should do the trick
<a target="_blank" href="http://www.exampleurl.com/file.pdf#page=4">
You can also do chapters if needed but this needs a correctly formatted PDF.
Thanks

How to force chrome to download files not opening them?

I am using window.location.href="link.mp4" in a userscript in chrome tampermonkey but rather than starting the download chrome is opening the file and starts playing it. I have a file link in a variable and i also use idm if there's any way to trigger the through idm.
Did you try download attribute ?
Example Download file when clicking on the link (instead of navigating
to the file):
<a href="/images/myw3schoolsimage.jpg" download>
http://www.w3schools.com/tags/att_a_download.asp
Try the HTML5 download attribute
<a href="myfile" download>click to download</a>
This opens a "save as" dialog regardless of file type.
The download attribute specifies that the target will be downloaded when a user clicks on the hyperlink.
<a href="filename.mp4" download>Download File</a>
Try working JSfiddle https://jsfiddle.net/balaji_mitkari/xpu9yrug/

window.location.href navigates out of my website

Okay now i'm having a tough situation. I'm using a free html template. So far i have been able to do the following:
When a user clicks the thumbnail. The video will play where it should.
All i had to do with add the direct raw video file to the href of that image.
<a class="thumbnail" href="VIDEO_LINK.MP4"><img src="http://i.imgur.com/KWyIHw8.jpg" /></a>
Then i came accross a problem where the raw link would display on the bottom left of the browser.
I fixed it by adding an onclick event to form a function.
<a class="thumbnail" href="#" onclick="video();"><img src="http://i.imgur.com/KWyIHw8.jpg"/></a>
The function is:
Function video() {window.location.href = 'VIDEO_LINK_HERE.MP4'}
Well it turns out that now when i click the image it navigates the whole page to that link.
I need to know how i can make it play without navigating out of my website like in the first picture and most importantly not showing the raw video link.
Try using the jquery load func, to load the image in a specific div
$("#div1").load("http://i.imgur.com/KWyIHw8.jpg")

Categories