Download CSV files with HttpClient in ReactJS

Question

I'm trying to make an API request using HttpClient to download a CSV file. I had to switch from Axios to HttpClient due to ForgeRock authentication that requires a bearer token. I'm having an issue where the response coming back does not have response.data. Where would I find the data to download to CSV?

My code:

fetchCSV = date => {
    const url = "https://<URLdownloadLink>?runDate="+date;
    const method = "GET";
    HttpClient
      .request({
        url,
        method,
        bypassAuthentication: false,
        responseType: 'blob',
        init: {},
        timeout: 5000
      })
      .then((response) => {
        console.log("data", response)
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', 'Asset Manager.csv');
        document.body.appendChild(link);
        link.click();
        link.remove();
      })
      .catch(error => {
        console.log("error", error);
      })
  }

The response I'm getting back is the below. The response does not have "response.data" as an object key. When I open the CSV it only has "undefined".

This is my response.body:

Njuguna Mureithi · Accepted Answer · 2022-08-13 04:20:42Z

1

You are using response.data instead of response.body? Thats why it says undefined. Remember CSV is just plain text and response.data is undefined.

fetchCSV = date => {
    const url = "https://<URLdownloadLink>?runDate=" + date;
    const method = "GET";
    HttpClient
        .request({
            url,
            method,
            bypassAuthentication: false,
            responseType: 'blob',
            init: {},
            timeout: 5000
        })
        .then((response) => {
            console.log("data", response)
            const url = window.URL.createObjectURL(new Blob([response.body]));
            const link = document.createElement('a');
            link.href = url;
            link.setAttribute('download', 'Asset Manager.csv');
            document.body.appendChild(link);
            link.click();
            link.remove();
        })
        .catch(error => {
            console.log("error", error);
        })
}

edited Aug 13, 2022 at 4:20

answered Jun 3, 2020 at 6:28

Njuguna Mureithi

3,8961 gold badge25 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jogi Nayak Over a year ago

Yes. Looks like the response has a body field and not data. So do console.log(response.body) and see if it shows what you're expecting

Collectives™ on Stack Overflow

Download CSV files with HttpClient in ReactJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related