How to Download Files Using Axios

How to download files using axios

When response comes with a downloadable file, response headers will be something like

Content-Disposition: "attachment;filename=report.xls"
Content-Type: "application/octet-stream" // or Content-type: "application/"

What you can do is create a separate component, which will contain a hidden iframe.

  import * as React from 'react';

var MyIframe = React.createClass({

render: function() {
return (
<div style={{display: 'none'}}>
<iframe src={this.props.iframeSrc} />

Now, you can pass the url of the downloadable file as prop to this component, So when this component will receive prop, it will re-render and file will be downloaded.

Edit: You can also use js-file-download module. Link to Github repo

const FileDownload = require('js-file-download');

url: 'http://localhost/downloadFile',
method: 'GET',
responseType: 'blob', // Important
}).then((response) => {
FileDownload(, 'report.csv');

Hope this helps :)

node.js axios download file stream and writeFile

Actually, I believe the previously accepted answer has some flaws, as it will not handle the writestream properly, so if you call "then()" after Axios has given you the response, you will end up having a partially downloaded file.

This is a more appropriate solution when downloading slightly larger files:

export async function downloadFile(fileUrl: string, outputLocationPath: string) {
const writer = createWriteStream(outputLocationPath);

return Axios({
method: 'get',
url: fileUrl,
responseType: 'stream',
}).then(response => {

//ensure that the user can call `then()` only when the file has
//been downloaded entirely.

return new Promise((resolve, reject) => {;
let error = null;
writer.on('error', err => {
error = err;
writer.on('close', () => {
if (!error) {
//no need to call the reject here, as it will have been called in the
//'error' stream;

This way, you can call downloadFile(), call then() on the returned promise, and making sure that the downloaded file will have completed processing.

Or, if you use a more modern version of NodeJS, you can try this instead:

import * as stream from 'stream';
import { promisify } from 'util';

const finished = promisify(stream.finished);

export async function downloadFile(fileUrl: string, outputLocationPath: string): Promise<any> {
const writer = createWriteStream(outputLocationPath);
return Axios({
method: 'get',
url: fileUrl,
responseType: 'stream',
}).then(response => {;
return finished(writer); //this is a Promise

Force download GET request using axios

You're getting empty PDF 'cause no data is passed to the server. You can try passing data using data object like this

  axios    .post(`order-results/${id}/export-pdf`, {      data: {        firstName: 'Fred'      },      responseType: 'arraybuffer'    })    .then(response => {      console.log(response)
let blob = new Blob([], { type: 'application/pdf' }), url = window.URL.createObjectURL(blob) // Mostly the same, I was just experimenting with different approaches, tried, iframe and other solutions })

How to download .zip file that i recieve from a HTTP response (axios PUT request)

I would suggest fetch over axios in concern of zip file because sometimes the response in axios request is not accurate and you might fall into currupted zip file while downloading, the best might be using a package called file-saver and fetch. I am posting this answer to help the developers to grab the concept only, the code is tested in React.

package file-saver:

Now make any function according to your choice in react, I am assuming functional component so will write method according to functional component syntax.
note before using saveAs function you need to import from the installed package file-saver.

import { saveAs } from 'file-saver';

const downloadZipFileFromLaravel=()=>{
fetch(`your url`)

.then(res => res.blob())
.then(blob => saveAs(blob, 'Auto')) // saveAs is a function from the file-saver package.
.catch((err) => {

at the end you need to connect the function with a button with onClick.

<button onClick={()=>downloadZipFileFromLaravel()}> </button>

Note: usage of file saver in pure javascript, you can check this:
How to use filesaver.js

For more information you can see the below discussion:

Download tar file using Axios

Problem #1 - Axios only supports responseType: "blob" in the browser.

If your Express app needs to retrieve a binary file, use this

const axiosRes = await axios.get(`${API}/file`, {
headers: { Authorization: `Bearer ${token}` }, // no data, no content-type
responseType: "arraybuffer", // use instead of "blob"

Problem #2 - You are responding with JSON

Using this

res.send({ data: });

will try and JSON stringify the binary file response which simply won't work. Instead, just send the raw response data


How to download file using axios and socks proxy agent

I can't see why this fixes the issue, but anyway I have fixed the problem by replacing "socks5" with "socks" in initializing proxy options.

So what i used first is below;

/* initialize proxy configuration */
const proxy_host = "", proxy_port = 1080;
const proxy_options = `socks5://${proxy_host}:${proxy_port}`;
const proxy_agent = new SocksProxyAgent(proxy_options);

This used to cause connection timeout error, but when i change socks5 to socks, it worked.

There is distinct difference between original socks(socks4) and modern socks5, it must be declared obviously, mustn't I?
I don't know why developers of npm socks-proxy-agent didn't announce about this issue, so weird.
We still have to write correct protocol while using socks proxy with curl command, google-chrome, etc.

Hope this would help you guys when using this npm, be caureful in this :)

Related Topics

Leave a reply