To download a PDF file of the response. Why PDF file is empty?

The problem is that I can not understand why is downloaded empty (white pages) the PDF file?

By clicking on the generated products list, I have a button download a file. When pressed, shoots the action with the id of my order (to insert the id in the url and get the response from the server in the form of PDF specific position). It is implemented using async await and looks like this:
import { returns } from '../../services/api';
import { DOWNLOAD_PDF, DOWNLOAD_PDF_SUCCESS, DOWNLOAD_PDF_FAIL } from '../../constants';
import { createAction } from '../../utilities';
import fileDownload from '../../utilities/file-download';
errorLogger import from './error';

export const request = createAction(DOWNLOAD_PDF);
export const success = createAction(DOWNLOAD_PDF_SUCCESS, ({ response, id }) => {
 fileDownload(response, `return${id}.pdf`);
 return { payload: { data: response, id } };
});
export const failure = createAction(DOWNLOAD_PDF_FAIL);

export default ({ id }) => {
 return async dispatch => {
 try {
dispatch(request());
 const response = await returns.getPdf({ id });
 dispatch(success({ response: response.data, id }));
 } catch (error) {
dispatch(
failure({
 payload: {
 message: 'failed to download PDF'
 stack: error.stack
},
}),
);
 errorLogger(error, DOWNLOAD_PDF);
}
};
};


fileDownload is my helper that looks like this:
export default function (data, fileName) {
 const byteNumbers = new Array(data.length);
 for (let i = 0; i < data.length; i += 1) {
 byteNumbers[i] = data.charCodeAt(i);
}
 const byteArray = new Uint8Array(byteNumbers);
 const blob = new Blob([byteArray], { type: 'application/pdf' });

console.log(blob);

 const link = document.createElement('a');
 const url = window.URL.createObjectURL(blob);

 link.style = 'display: none';
 link.href = url;
 link.download = `${fileName}`;

document.body.appendChild(link);

link.click();

window.URL.revokeObjectURL(url);
document.body.removeChild(link);
}


Here I'm trying to get character by character (?) file focusing on MDN

But in the end I have a empty file (probably something with encoding or so).

While I tried to solve the issue, run the code from the browser console (Chrome)
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://<site>/{my id}', true);
xhr.responseType = 'blob';
xhr.setRequestHeader("Authorization-Domain", "http://");
xhr.setRequestHeader("Authorization-Session", "");
xhr.onload = function(e) {
if (this.status == 200) {

const blob = new Blob([this.response], { type:'application/pdf' });

const link = document.createElement('a');
const url = window.URL.createObjectURL(blob);

link.style = 'display: none';
link.href = url;
link.download = `${name}`;

document.body.appendChild(link);

link.click();

window.URL.revokeObjectURL(url);
document.body.removeChild(link);

}
};

xhr.send();

And the file downloaded as it should. Headers authorization I have going at the time when I appeal to the Beck.
The weight of the file downloaded via the console of chrome 69кб, using helper 65кб.
In console.log(blob) in my helper displays the following: Blob(64061) {size: 64061, type: "application/pdf"}.

What am I doing wrong? And why I downloaded is empty (no letters, etc) the PDF file?
June 10th 19 at 14:49
2 answers
June 10th 19 at 14:51
Solution
In General, I found the solution. Walked around it many times, but thanks to Alexander Taratino, who once said about him and managed to solve the problem.

The problem lay in the fact that I have a separate file that creates the request header and their httpConfig'and it was necessary only to add responseType: 'blob'

So

export const getPdfConfig = axios.create({
...httpConfig,
 responseType: 'blob',
 headers: {
...customHeaders,
 'Content-Type': 'application/pdf',
},
}).get;


Well then use fileSaver.
June 10th 19 at 14:53
've used. But did not take off. Could write code specifically for my helper? What should I do? - Geovanny.Ki commented on June 10th 19 at 14:56

Find more questions by tags ReactJavaScriptRedux