Navigate back to the homepage

How to download file in react

Infinitbility
React
July 3rd, 2021 · 1 min read

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});

Thanks for reading…

Follow me on Twitter

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.

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]

Guide book

Guidebook: The Javascript Monorepo Photoshop Guide

Tutorials

Categories

More articles from Infinitbility

Sequelize Operators Example with query

Sequelize Operators

July 2nd, 2021 · 1 min read

Node sequelize update query example

Sequelize update

July 1st, 2021 · 1 min read
© 2020–2022 Infinitbility
About
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]