React - the downloaded pdf is blank

Question

At first, I send a GET request for the pdf data

const config = {
  headers: {
    'Content-Type': 'application/json',
     Accept: 'application/json',
  },
  baseURL: 'https://my-site.com',
};
const axiosInstance = axios.create({config});
 
const pdf = await axiosInstance.get('url', {
        headers: { Authorization: 'Bearer ' + accessToken, Accept: '*/*' },
})

The value of pdf is the same as below

Then I tried to download the file

    const url = window.URL.createObjectURL(new Blob([pdf]));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', `FileName.pdf`);

    // Append to html link element page
    document.body.appendChild(link);

    // Start download
    link.click();

I can download the pdf file successfully, but the pdf is blank when I open it.

How to fix it?

Answer 1

Fix it by adding responseType: 'blob'

const pdf = await axiosInstance.get('url', {
        headers: { Authorization: 'Bearer ' + accessToken, Accept: '*/*' },
        responseType: 'blob',
})