How to download a file from an API response which is in a different format ?

await axios.get(`/dashboard/reportdownload/?file_name=242424242.pdf`,{
            headers: {
              "Authorization": `Bearer 767958756576576576jgjhgjhg`
            }
          })
          .then((res) => {
            console.log(res?.data);
          });

In response I am getting

How do download it with reactjs

How to download a file from an API response which is in a different format ?

await axios.get(`/dashboard/reportdownload/?file_name=242424242.pdf`,{
            headers: {
              "Authorization": `Bearer 767958756576576576jgjhgjhg`
            }
          })
          .then((res) => {
            console.log(res?.data);
          });

In response I am getting

How do download it with reactjs

• javascript
• reactjs
• ecmascript-6
• axios

1 Answer 1

You need to check if the response from the API is of type blob, then convert it. For example, if it is clear you are expecting a PDF response, try this:

await axios.get(`/dashboard/reportdownload/?file_name=242424242.pdf`, {
  headers: {
    'Authorization': `Bearer 767958756576576576jgjhgjhg`
  }
})
  .then((response) => {
    let fileName = '242424242.pdf';
    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
      // IE variant
      window.navigator.msSaveOrOpenBlob(
        new Blob([response.data], {
          type: 'application/pdf',
          encoding: 'UTF-8'
        }),
        fileName
      );
    } else {
      const url = window.URL.createObjectURL(
        new Blob([response.data], {
          type: 'application/pdf',
          encoding: 'UTF-8'
        })
      );
      const link = document.createElement('a');
      link.href = url;
      link.setAttribute('download', fileName);
      document.body.appendChild(link);
      link.click();
      link.remove();
    }
  });