javascript - Reactjs download file without anchor tag or without opening a file in new tab - Stack Overflow

admin管理员组

文章数量:1290975

I am getting a file url from an API e.g '.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?

I am getting a file url from an API e.g 'http://example./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?

• javascript
• html
• reactjs

Share Improve this question Follow edited Apr 26, 2018 at 9:45 Martin Reiche 1,67211 gold badge1616 silver badges2727 bronze badges asked Apr 26, 2018 at 8:08 Sameer ThiteSameer Thite 2,46933 gold badges1111 silver badges1313 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

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>

Instead of triggering the download from the user click, do it through the code:

export function downloadButton(link: string, downloadedFileName: string){
    return (
        <button onClick={() => downloadFile(link, downloadedFileName)}>Download external link</botton>
    );

}

export async function downloadFile(link: RequestInfo, fileName: string): Promise<void> {
    try {
        const response = await fetch(link);
        const blob = await response.blob();
        const url = window.URL.createObjectURL(new Blob([blob]));
        const anchorElement = document.createElement("a");
        anchorElement.href = url;
        anchorElement.setAttribute("download", fileName);
        anchorElement.target = "_blank";
        document.body.appendChild(anchorElement);

        anchorElement.click();
        anchorElement?.parentNode?.removeChild(anchorElement);
    } catch (error) {
        console.error(error);
    }
}

This solution was verified with external links, meaning links that the domain in the URL is different from the current site domain

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

本文标签： javascriptReactjs download file without anchor tag or without opening a file in new tabStack Overflow