I receive file url as response from api. when user clicks on download button, the file should be downloaded without opening file preview in a new tab. How to achieve this in react js?
-
1Triggering browser download from front-end is not a reliable way to do it. You should create endpoint that when called, will provide the correct response headers, thus triggering the browser download. Front-end code can only do so much. The 'download' attribute for example, might just open the file in a new tab depending on the browser. – Jackyef Jun 5 '18 at 8:08
-
From my understanding, you are saying that it can be achieved by rest api with correct response headers, is it right? – Sameer Thite Jun 5 '18 at 8:15
-
1Yes. I didn't know how to attach a link in comment, so I posted an answer. – Jackyef Jun 5 '18 at 8:20
Triggering browser download from front-end is not reliable.
What you should do is, create an endpoint that when called, will provide the correct response headers, thus triggering the browser download.
Front-end code can only do so much. The 'download' attribute for example, might just open the file in a new tab depending on the browser.
The response headers you need to look at are probably Content-Type
and Content-Disposition
. You should check this answer for more detailed explanation.
-
1What you should do is, create an endpoint that when called, will provide the correct response headers, thus triggering the browser download.... What are those header and how does specifics headers can trigger browser download ? thanks – 1020rpz May 22 '20 at 16:46
This is not related to React. However, you can use the download
attribute on the anchor <a>
element to tell the browser to download the file.
<a href='/somefile.txt' download>Click to download</a>
This is not supported on all browsers: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
-
Anchor tag opens image in same browser tab (preview of image) and then we need to manually save the image. I am trying to achieve automatic download on button click, without opening file preview – Sameer Thite Jun 5 '18 at 8:08
-
-
If you are using React Router, use this:
<Link to="/files/myfile.pdf" target="_blank" download>Download</Link>
Where /files/myfile.pdf
is inside your public
folder.
-
I try for zip file, the file downloads, and never unzips properly. Someone might know the reason for it? Btw, I find a workaround: stackoverflow.com/a/62855917/7622204 – Rohan Kumar Jul 12 '20 at 0:27
browsers are smart enough to detect the link and downloading it directly when clicking on an anchor tag without using the download attribute.
after getting your file link from the api, just use plain javascript by creating anchor tag and delete it after clicking on it dynamically immediately on the fly.
const link = document.createElement('a');
link.href = `your_link.pdf`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
tldr; fetch the file from the url, store it as a local Blob, inject a link element into the DOM, and click it to download the Blob
I had a PDF file that was stored in S3 behind a Cloudfront URL. I wanted the user to be able to click a button and immediately initiate a download without popping open a new tab with a PDF preview. Generally, if a file is hosted at a URL that has a different domain that the site the user is currently on, immediate downloads are blocked by many browsers for user security reasons. If you use this solution, do not initiate the file download unless a user clicks on a button to intentionally download.
In order to get by this, I needed to fetch the file from the URL getting around any CORS policies to save a local Blob that would then be the source of the downloaded file. In the code below, make sure you swap in your own fileURL
, Content-Type
, and FileName
.
fetch('https://cors-anywhere.herokuapp.com/' + fileURL, {
method: 'GET',
headers: {
'Content-Type': 'application/pdf',
},
})
.then((response) => response.blob())
.then((blob) => {
// Create blob link to download
const url = window.URL.createObjectURL(
new Blob([blob]),
);
const link = document.createElement('a');
link.href = url;
link.setAttribute(
'download',
`FileName.pdf`,
);
// Append to html link element page
document.body.appendChild(link);
// Start download
link.click();
// Clean up and remove the link
link.parentNode.removeChild(link);
});
This solution references solutions to getting a blob from a URL and using a CORS proxy.
Update As of January 31st, 2021, the cors-anywhere demo hosted on Heroku servers will only allow limited use for testing purposes and cannot be used for production applications. You will have to host your own cors-anywhere server by following cors-anywhere or cors-server.
-
1
This is how I did it in React:
import MyPDF from '../path/to/file.pdf';
<a href={myPDF} download="My_File.pdf"> Download Here </a>
It's important to override the default file name with download="name_of_file_you_want.pdf"
or else the file will get a hash number attached to it when you download.
React gives a security issue when using a
tag with target="_blank"
.
I managed to get it working like that:
<a href={uploadedFileLink} target="_blank" rel="noopener noreferrer" download>
<Button>
<i className="fas fa-download"/>
Download File
</Button>
</a>
Solution (Work Perfect for React JS, Next JS)
You can use js-file-download and this is my example:
import axios from 'axios'
import fileDownload from 'js-file-download'
...
handleDownload = (url, filename) => {
axios.get(url, {
responseType: 'blob',
})
.then((res) => {
fileDownload(res.data, filename)
})
}
...
<button onClick={() => {this.handleDownload('https://your-website.com/your-image.jpg', 'test-download.jpg')
}}>Download Image</button>
This plugin can download excel and other file types.
I have the exact same problem, and here is the solution I make use of now: (Note, this seems ideal to me because it keeps the files closely tied to the SinglePageApplication React app, that loads from Amazon S3. So, it's like storing on S3, and in an application, that knows where it is in S3, relatively speaking.
Steps
3 steps:
- Make use of file saver in project: npmjs/package/file-saver (
npm install file-saver
or something) - Place the file in your project You say it's in the components folder. Well, chances are if you've got web-pack it's going to try and minify it.(someone please pinpoint what webpack would do with an asset file in components folder), and so I don't think it's what you'd want. So, I suggest to place the asset into the
public
folder, under aresource
or anasset
name. Webpack doesn't touch thepublic
folder andindex.html
and your resources get copied over in production build as is, where you may refer them as shown in next step. - Refer to the file in your project Sample code:
import FileSaver from 'file-saver'; FileSaver.saveAs( process.env.PUBLIC_URL + "/resource/file.anyType", "fileNameYouWishCustomerToDownLoadAs.anyType");
Source
Appendix
- I also try
Link
component ofreact-router
react-router-docs/Link. The zip file would download, and somehow would unzip properly. Generally, links have blue color, to inherit parent color scheme, simply add a prop like:style={color: inherit}
or simply assign a class of your CSS library likebutton button-primary
or something if you're Bootstrappin' - Other sage questions it's closely related to:
-
This is kind of a cool library. It still opened PDFs in a new tab unfortunately though. It makes opening the file on the fly a really clean process though. – Jake Jul 31 '20 at 13:57
You can use FileSaver.js to achieve this goal:
const saveFile = () => {
fileSaver.saveAs(
process.env.REACT_APP_CLIENT_URL + "/resources/cv.pdf",
"MyCV.pdf"
);
};
<button className="cv" onClick={saveFile}>
Download File
</button>
You can define a component and use it wherever.
import React from 'react';
import PropTypes from 'prop-types';
export const DownloadLink = ({ to, children, ...rest }) => {
return (
<a
{...rest}
href={to}
download
>
{children}
</a>
);
};
DownloadLink.propTypes = {
to: PropTypes.string,
children: PropTypes.any,
};
export default DownloadLink;
We can user react-download-link component to download content as File.
<DownloadLink
label="Download"
filename="fileName.txt"
exportFile={() => "Client side cache data here…"}/>
https://frugalisminds.com/how-to-download-file-in-react-js-react-download-link/
Download file
For downloading you can use multiple ways as been explained above, moreover I will also provide my strategy for this scenario.
npm install --save react-download-link
import DownloadLink from "react-download-link";
- React download link for client side cache data
<DownloadLink label="Download" filename="fileName.txt" exportFile={() => "Client side cache data here…"} />
- Download link for client side cache data with Promises
<DownloadLink label="Download with Promise" filename="fileName.txt" exportFile={() => Promise.resolve("cached data here …")} />
- Download link for data from URL with Promises Function to Fetch data from URL
getDataFromURL = (url) => new Promise((resolve, reject) => { setTimeout(() => { fetch(url) .then(response => response.text()) .then(data => { resolve(data) }); }); }, 2000);
- DownloadLink component calling Fetch function
<DownloadLink label=”Download” filename=”filename.txt” exportFile={() => Promise.resolve(this. getDataFromURL (url))} />