86

i want download a pdf file with axios and save on disk (server side) with fs.writeFile, i have tried:

axios.get('https://xxx/my.pdf', {responseType: 'blob'}).then(response => {
    fs.writeFile('/temp/my.pdf', response.data, (err) => {
        if (err) throw err;
        console.log('The file has been saved!');
    });
});

the file is saved but the content is broken...

how do I correctly save the file?

4
  • you get the console log "The file has been saved" and the file is created and just the content is wrong? Mar 27, 2019 at 10:19
  • where you are calling axios.get ? it will not wait for the file to be written. better promisify the fs or use fs-extra or use promisfied methods from fs. and use like return fs.writeFile(...)
    – AZ_
    Mar 27, 2019 at 10:21
  • @RolandStarke yes, the file is saved
    – ar099968
    Mar 27, 2019 at 10:27
  • 1
    I've posted a more cleaner approach to solve the problem using node stream pipelines below. It's on the same concept which the accepted answer proposes. stackoverflow.com/a/64925465/3476378
    – Aman Saraf
    Nov 20, 2020 at 7:39

13 Answers 13

139

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) => {
      response.data.pipe(writer);
      let error = null;
      writer.on('error', err => {
        error = err;
        writer.close();
        reject(err);
      });
      writer.on('close', () => {
        if (!error) {
          resolve(true);
        }
        //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 => {
    response.data.pipe(writer);
    return finished(writer); //this is a Promise
  });
}
11
  • 1
    This is correct and solves exactly the problem related to Partial data error Apr 27, 2020 at 13:12
  • 2
    this should be the accepted answer. it fixed the partial download error
    – ariezona
    May 12, 2020 at 18:10
  • 2
    I've posted a more cleaner approach on the same concept of your using stream pipelines below: stackoverflow.com/a/64925465/3476378.
    – Aman Saraf
    Nov 20, 2020 at 7:38
  • 2
    I'm not sure I follow. As bytes are downloaded, they are being streamed to a file, and once all bytes have been streamed, the Promise ends, and the rest of the application flow continues. The 'then' in the example is called before the file has finished downloading - check the documentation about the stream responseType of axios.
    – csotiriou
    Feb 27, 2021 at 22:17
  • 7
    response.data.pipe is not a function
    – rendom
    Jun 12, 2021 at 5:56
90

You can simply use response.data.pipe and fs.createWriteStream to pipe response to file

axios({
    method: "get",
    url: "https://xxx/my.pdf",
    responseType: "stream"
}).then(function (response) {
    response.data.pipe(fs.createWriteStream("/temp/my.pdf"));
});
5
  • Thank you so much!! Was looking for this forever Feb 26, 2020 at 1:16
  • 1
    This answer is not complete, because when you download some larger files, the pipe will give you more than one events. This code does not wait until the whole file has been downloaded before one can call then on it. Take a look at my solution to find what I consider a more complete solution.
    – csotiriou
    Apr 17, 2020 at 10:33
  • 33
    response.data.pipe is not a function Jun 11, 2020 at 1:36
  • if to not download file on local storage then how to do that i tried res.sendFile in node.js
    – s.j
    Apr 16, 2021 at 8:06
  • 1
    To critique this solution, you must set the responseType to "stream". Not doing so will cause an error when you try to pipe it to another stream. Oct 21, 2022 at 15:02
32

The problem with broken file is because of backpressuring in node streams. You may find this link useful to read: https://nodejs.org/es/docs/guides/backpressuring-in-streams/

I'm not really a fan of using Promise base declarative objects in JS codes as I feel it pollutes the actual core logic & makes the code hard to read. On top of it, you have to provision event handlers & listeners to make sure the code is completed.

A more cleaner approach on the same logic which the accepted answer proposes is given below. It uses the concepts of stream pipelines.

const util = require('util');
const stream = require('stream');
const pipeline = util.promisify(stream.pipeline);

const downloadFile = async () => {
  try {
    const request = await axios.get('https://xxx/my.pdf', {
      responseType: 'stream',
    });
    await pipeline(request.data, fs.createWriteStream('/temp/my.pdf'));
    console.log('download pdf pipeline successful');   
  } catch (error) {
    console.error('download pdf pipeline failed', error);
  }
}

exports.downloadFile = downloadFile

I hope you find this useful.

4
  • Why response type blob and not stream?
    – 1252748
    Feb 26, 2021 at 1:54
  • 1
    I get "stream.on is not a function" error with this method
    – dz210
    Jun 7, 2021 at 1:11
  • I got it working like this: const resp = await axios.get(....); await pipeline(resp.data, fs.createWriteStream(...))
    – dz210
    Jun 7, 2021 at 3:28
  • @1252748 blob is a browser only option.
    – B45i
    Nov 27, 2021 at 10:27
14

The following code taken from https://gist.github.com/senthilmpro/072f5e69bdef4baffc8442c7e696f4eb?permalink_comment_id=3620639#gistcomment-3620639 worked for me

const res = await axios.get(url, { responseType: 'arraybuffer' });
fs.writeFileSync(downloadDestination, res.data);
1
  • 1
    Thank you very much I didn't want to use streams since I need to upload this file to my cloud! Jan 10 at 15:23
12
// This works perfectly well! 
const axios = require('axios'); 

axios.get('http://www.sclance.com/pngs/png-file-download/png_file_download_1057991.png', {responseType: "stream"} )  
.then(response => {  
// Saving file to working directory  
    response.data.pipe(fs.createWriteStream("todays_picture.png"));  
})  
    .catch(error => {  
    console.log(error);  
});  
2
  • 10
    Welcome to StackOverflow! You may want to provide a bit of explanation to go along with your code sample.
    – Airn5475
    Sep 5, 2019 at 13:06
  • 2
    this is not going to work properly, as it will not wait until the file has finished downloading before continuing the promise chain.
    – csotiriou
    Feb 28, 2021 at 10:08
6

node fileSystem writeFile encodes data by default to UTF8. which could be a problem in your case.

Try setting your encoding to null and skip encoding the received data:

fs.writeFile('/temp/my.pdf', response.data, {encoding: null}, (err) => {...}

you can also decalre encoding as a string (instead of options object) if you only declare encoding and no other options. string will be handled as encoding value. as such:

fs.writeFile('/temp/my.pdf', response.data, 'null', (err) => {...}

more read in fileSystem API write_file

1
  • @double-beep tnx for your comment. i've edited with some explanation and read material from node fileSystem API about writeFile function. :)
    – fedesc
    Mar 27, 2019 at 11:56
5

There is a much simpler way that can be accomplished in a couple of lines:

import fs from 'fs';

const fsPromises = fs.promises;

const fileResponse = await axios({
    url: fileUrl,
    method: "GET",
    responseType: "stream",
});

// Write file to disk (here I use fs.promise but you can use writeFileSync it's equal
await fsPromises.writeFile(filePath, fileResponse.data);

Axios has internal capacity of handling streams and you don't need to necessarily meddle with low-level Node APIs for that.

Check out https://axios-http.com/docs/req_config (find the responseType part in the docs for all the types you can use).

4
  • What is fsPromises? Mar 26 at 16:39
  • 1
    I edited the answer to make it clearer. Thank you! Mar 27 at 6:47
  • I am trying to wrap my head around it. Why don't we need pipeline in this case? How does this avoid pipeline but regular createWriteStream doesn't? Is this still only writing to file without saving any backpressuring-related data to memory?
    – Telion
    Aug 28 at 12:36
  • I'm not completely sure, but my best guess is axios is handling all of that under the hood. Aug 28 at 19:17
3

I have tried, and I'm sure that using response.data.pipe and fs.createWriteStream can work.


Besides, I want to add my situation and solution

Situation:

  • using koa to develop a node.js server
  • using axios to get a pdf via url
  • using pdf-parse to parse the pdf
  • extract some information of pdf and return it as json to browser

Solution:

const Koa = require('koa');
const app = new Koa();
const axios = require('axios')
const fs = require("fs")
const pdf = require('pdf-parse');
const utils = require('./utils')

app.listen(process.env.PORT || 3000)

app.use(async (ctx, next) => {
      let url = 'https://path/name.pdf'
      let resp = await axios({
          url: encodeURI(url),
          responseType: 'arraybuffer'
        })

        let data = await pdf(resp.data)

        ctx.body = {
            phone: utils.getPhone(data.text),
            email: utils.getEmail(data.text),
        }
})

In this solution, it doesn't need to write file and read file, it's more efficient.

2
  • How is buffering the entire data file in memory before sending it "more efficient" than streaming it? Oct 6, 2022 at 14:09
  • I don't get your point? What do you mean by saying "sending"? In my situation, I only need to parse pdf file, no need to respond
    – levy9527
    Oct 8, 2022 at 8:03
3

If you just want the file use this

const media_data =await axios({url: url, method: "get",  responseType: "arraybuffer"})
writeFile("./image.jpg", Buffer.from(media_data.data), {encoding: "binary"}, console.log)
2

This is what worked for me and it also creates a temporary file for the image file in case the output file path is not specified:

const fs = require('fs')
const axios = require('axios').default
const tmp = require('tmp');

const downloadFile = async (fileUrl, outputLocationPath) => {
    if(!outputLocationPath) {
        outputLocationPath = tmp.fileSync({ mode: 0o644, prefix: 'kuzzle-listener-', postfix: '.jpg' });
    }
    let path = typeof outputLocationPath === 'object' ? outputLocationPath.name : outputLocationPath
    const writer = fs.createWriteStream(path)
    const response = await axios.get(fileUrl, { responseType: 'arraybuffer' })
    return new Promise((resolve, reject) => {
        if(response.data instanceof Buffer) {
            writer.write(response.data)
            resolve(outputLocationPath.name)
        } else {
            response.data.pipe(writer)
            let error = null
            writer.on('error', err => {
                error = err
                writer.close()
                reject(err)
            })
            writer.on('close', () => {
                if (!error) {
                    resolve(outputLocationPath.name)
                }
            })
        }
    })
}

Here is a very simple Jest test:

it('when downloadFile should downloaded', () => {
    downloadFile('https://i.ytimg.com/vi/HhpbzPMCKDc/hq720.jpg').then((file) => {
        console.log('file', file)
        expect(file).toBeTruthy()
        expect(file.length).toBeGreaterThan(10)
    })
})
2

Lorenzo's response is probably the best answer as it's using the axios built-in. Here's a simple way to do it if you just want the buffer:

const downloadFile = url => axios({ url, responseType: 'stream' })
  .then(({ data }) => {
    const buff = []
    data.on('data', chunk => buff.push(chunk))
    return new Promise((resolve, reject) => {
      data.on('error', reject)
      data.on('close', () => resolve(Buffer.concat(buff)))
    })
  })

// better
const downloadFile = url => axios({ url, responseType: 'arraybuffer' }).then(res => res.data)

const res = await downloadFile(url)
fs.writeFileSync(downloadDestination, res)

I'd still probably use the 'arraybuffer' responseType

-3
import download from "downloadjs";

export const downloadFile = async (fileName) => {
    axios({
        method: "get",
        url: `/api/v1/users/resume/${fileName}`,
        responseType: "blob",
    }).then(function (response) {
        download(response.data, fileName);
    });
};

it's work fine to me

-4

This is my example code run with node js There is a synctax error

should be writeFile not WriteFile

const axios = require('axios');
const fs = require('fs');
axios.get('http://www.africau.edu/images/default/sample.pdf', {responseType: 'blob'}).then(response => {
  fs.writeFile('./my.pdf', response.data, (err) => {
        if (err) throw err;
        console.log('The file has been saved!');
    });
});

After the file is saved it might look like in a text editor, but the file was saved properly

%PDF-1.3
%����

1 0 obj
<<
/Type /Catalog
/Outlines 2 0 R
/Pages 3 0 R
>>
endobj

2 0 obj
<<
/Type /Outlines
/Count 0
>>
endobj

3 0 obj
<<
/Type /Pages
/Count 2
/Kids [ 4 0 R 6 0 R ] 
>>
endobj
1
  • 2
    How is this an answer? You have not explained anything that is different from what the OP posted. Mar 27, 2019 at 10:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.