Navigate back to the homepage

How to download file in react

Infinitbility
React
July 3rd, 2021 · 1 min read
How to download file in react

Hello Friends,

Welcome To Infinitbility!

This article based on how to download any file in react, when you are working any type of project there are one definitely feature is download report.

May be you are looking for excel ( xslx, and csv ), pdf, video ( mp4, mov, and avi ), image (png, jpg, and jpeg ) and etc but in this article we will learn to download any type file in react.

Let start today article How to download file in react

For download any type of file we will need two react packages

  1. axios - https://github.com/axios/axios
  2. js-file-download - https://github.com/kennethjiang/js-file-download

We will use axios for fetch file url and js-file-download for make fetch data downloadable.

Installation

You have to first install both package using below command on your project.

Install axios

1npm install axios

Install js-file-download

1npm install js-file-download --save

Usages

Using axios and js-file-download you can download any file in any browser.

Let’s understand with example

1import fileDownload from 'js-file-download'
2import axios from 'axios'
3
4let filePath = “https://example.com/filename.csv”;
5axios.get(`${filePath}`, {
6 responseType: 'blob',
7}).then((res) => {
8 let filename = filePath.replace(/^.*[\\\/]/, '')
9 let fileExtension;
10 fileExtension= filePath.split('.');
11 fileExtension =fileExtension[fileExtension.length -1];
12 fileDownload(res.data, `${filename}.${fileExtension}`);
13});

Subscribe Our Newsletter You will get monthly free programming book

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Subscribe Our Newsletter You will get monthly free programming book

Tutorials

React Native

Categories

More articles from Infinitbility

Sequelize Operators Example with query

Sequelize Operators Example with query

Sequelize Operators

July 2nd, 2021 · 2 min read
Node sequelize update query example

Node sequelize update query example

Sequelize update

July 1st, 2021 · 1 min read
© 2020–2021 Infinitbility
Disclaimer
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]