Downloading PDF file in Browser received as binary string from 3rd party and passing from few servers

Viewed 23

I'm trying to download a PDF file for an invoice in the browser from a binary string which is received from a 3rd party and returning as the response from 2 of my own servers. The request flow is as follows:

VueJs app => Server 1 => Server2 => 3rd party

The 3rd party response header content type is "application/pdf" and I setting that response header as well on the response of each of my servers. In the front end I've tried several things, but non of them works such that I'm able to open a valid PDF file.

A few things I've tried to do is: 1. setting responseType: 'blob' and then:

const response = await Api.downloadAccountInvoice(accountId, invoiceId);
const blob: Blob = await response.blob();

const invoiceLink = document.createElement('a');
invoiceLink.href = URL.createObjectURL(blob);
invoiceLink.download = `${invoiceId}.pdf`;
document.body.appendChild(invoiceLink);
invoiceLink.click();
URL.revokeObjectURL(invoiceLink.href);
document.body.removeChild(invoiceLink);

This fails right away on the const blob: Blob = await response.blob();

2. setting responseType: 'blob' and then:

const response = await Api.downloadAccountInvoice(accountId, invoiceId);
const blob: Blob = new Blob([response.body], { type: 'application/pdf' });

const invoiceLink = document.createElement('a');
invoiceLink.href = URL.createObjectURL(blob);
invoiceLink.download = `${invoiceId}.pdf`;
document.body.appendChild(invoiceLink);
invoiceLink.click();
URL.revokeObjectURL(invoiceLink.href);
document.body.removeChild(invoiceLink);

The file is downloaded but can't be opened.

3. NOT setting responseType: 'blob' and then doing 2 the same. the result is the same, the pdf file can't be opened.

4. I've also tried to encode the binary string as base64 on my second server as such: Buffer.from(pdfBinaryString, 'binary').toString('base64'); And on the browser decode is with const base64ToBinary = atob(response.body); and then creating the blob and doing the rest as described above.

I've searched for posts on that subject everywhere and couldn't find the solution to this.

Please help!

0 Answers
Related