After a request to an API, I get a PDF as a response. I then pass this response to the frontend for the user to print, however on the frontend I only manage to get a PDF with the correct number of page, but all the pages are blank.

Here is the request:

const streamResponse = await axios({
    url : endpoint_url,
    method: 'GET',
        headers: {
            some authorization parameters,
        },
        responseType: 'stream'
    });
        
    streamResponse.data.pipe(res)

On the frontend I have this code:

let blob = new Blob([res.data], { type: "application/pdf" });
let link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = 'output.pdf';
link.click();

I also tried to use the file-saver library to directly save the PDF but I get the same result. The data in the response is something like that :

"%PDF-1.4
%����
4 0 obj
<</Filter/FlateDecode/Length 1379>>stream
x���]s�6����3�N�,���%���N����Nn,۴|8|$�_IX a�����$A���WGGΛv>�6�fs̀�#���%d�l����ٿ�ݐ�덦S�L@#&b=$K��>���y�dOd'Y�]��7EV�7X?�h�>`_�
�t%�=��,����!N3Pm,�Ɠ�{�tPYb`������P�jVڭJR����c5�ي��N�$� i�8�Oqlt����wg�#����$�-gC�%��&$Q���q�@���>� �W�i��Ż+TM��s���&uÀk�x$(��|I)8�S^̑�M��y���Na���<)&���hq��D^�̏#HW�G�5~'�M� .......

I know that it is a valid PDF file because I am able to save it on the server, but I cannot find anyway to serve it to the client side.

I also tried to save it in the server and then using a request using the below code to serve it to the client:

let pdfFile = fs.createReadStream(pdfFilePath)
res.setHeader('Content-Type', 'application/pdf')
pdfFile.pipe(res);