Create and Download PDF file from binary string with JS/TS

Question

An Axios request to server response the content of a PDF as a binary string.

export const fetchPDFfile = async (id: string): Promise<string> => {
  const { data } = await http.get<string>(`${baseUrl}/${id}.pdf`);
  return data;
};

The response in Chrome devtools and also console logging the data is like:

%PDF-1.4
%âãÏÓ
2 0 obj <</ColorSpa ......
..........
startxref
10991
%%EOF

is defining string as the expected type of Axios response body, correct? or it should be (cast to) Blob?

Now I want to download this as a PDF file in the client-side. There are plenty of questions regarding this but none worked for me and also none had a clear answer.

So what I did so far was (in a React component):

    const data = await fetchPDFfile(props.id);
    const blob = new Blob([data], { type: 'application/pdf' });
    const href = window.URL.createObjectURL(blob);
    const theLink = document.createElement('a');
    theLink.href = href;
    theLink.download = props.id + '.pdf';
    document.body.appendChild(theLink);
    theLink.click();
    document.body.removeChild(theLink);

This downloads a PDF file with 3 blank pages. The number of pages is correct the original doc should bee 3 pages. But I see the white paper.

const href = window.URL.createObjectURL(data); // istead of blob throw Error.

How should I convert and download this PDF file? In general, is the process above needed, or should I directly download it from the server? (something like what cordova-plugin-file-transfer does)

Something like https://www.jianjunchen.com/papers/CORS-USESEC18.slides.pdf Does it matter? — Amir-Mousavi
– Amir-Mousavi, Commented Dec 3, 2019 at 16:36

LALIT KANTA DIBYADARSHAN · Accepted Answer · 2019-12-03 16:50:10Z

11

Scenario

You want the file to be downloaded when the user clicks the link.

Solution 1-

Directly put the link in <a> tag.

Cons- Error message can not be shown on the screen if something went wrong.

So it leads to the next solution.

Solution 2-

Hit the URL as an API and download the file if you get the success message. For this, I use File-server.js

**Don't forget to set the {responseType: 'blob'}, while making the request

http.get<string>(`${baseUrl}/${id}.pdf`, {responseType: 'blob'})

as we don't want the response with Content-Type: application/json

sample code:

import FileSaver from 'file-saver';

downloadPdf() {
    var blob = new Blob([data], {type: "application/pdf"});
    FileSaver.saveAs(blob, "filename");
}

edited Dec 3, 2019 at 16:50

answered Dec 3, 2019 at 16:41

LALIT KANTA DIBYADARSHAN

7534 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Amir-Mousavi Over a year ago

Thanks for the answer, the {responseType: 'blob'} was the key :)

Luk Deathrage Prochzka · Accepted Answer · 2019-12-03 16:26:23Z

2

Firstly use Blob as generic argument for Promise.

I will use fetch API as it can be tested quite easily.

fetch('https://www.jianjunchen.com/papers/CORS-USESEC18.slides.pdf').then(x => x.blob()).then(b => console.log(b.type))

This will log "application/pdf" it the file is trully pdf.

If you got a blob that is not PDF and you will re-wrap it to Blob with pdf type you might break the data. If you got trully a string and you convert it to Blob with pdf type the file will be broken as the PDF would be invalid.

If you want to know if b is trully a blob just console.log(b instanceof Blob) and it should say true. If you have recieved trully a blob you do not have to create new one as you did in new Blob([data]).

This example works just fine:

fetch('https://www.jianjunchen.com/papers/CORS-USESEC18.slides.pdf').then(x => x.blob()).then(b => {
  const url = window.URL.createObjectURL(b);
  var a = document.createElement("a");
  document.body.appendChild(a);
  a.style = "display: none";
  a.href = url;
  a.download = "a.pdf";
  a.click();
  window.URL.revokeObjectURL(url);
})

Sorry for broken code style but I was unable to paste it properly.

edited Dec 3, 2019 at 16:26

answered Dec 3, 2019 at 16:13

Luk Deathrage Prochzka

3661 silver badge13 bronze badges

3 Comments

Amir-Mousavi Over a year ago

Thanks for the answer, but what is the type of x cause x => x.blob() throws x.blob is not a function

Luk Deathrage Prochzka Over a year ago

It is Fetch API specific. Compared to axios fethc api doesnt resolve response automaticaly so you have to call either blob() or text() or json() etc... Fetch returns a Promise with Reponse object that can be anything and you have to shape it. These "shaping" functions return Promise that contains shaped response content. Axios shapes it for you so you do not have to do that manually. Basically common code with axios is the part in the last then function.

Amir-Mousavi Over a year ago

Thanks, it was a good point to know, But as I use Axios, had to accept the other answer. Thanks again for your input

Kabilan · Accepted Answer · 2023-08-03 04:44:51Z

For nestjs

In service

async download() {
        try {
            const url = `https://example.com`;
            
            const headers = {
              Authorization: `Bearer ${this.accessToken}`,
              'Content-Type': 'application/pdf'
            };
            const response: AxiosResponse<any> = await this.httpService.get(url, { headers, responseType: 'arraybuffer' }).toPromise();
      
            return response.data;
        } catch (error) {
            throw new Error('Unable to download '+ error);
        }
    }

In Controller

@Get('download')
    async download(@Res() res) {
        const data = await this.appService.download();

        res.setHeader('Content-disposition', 'attachment; filename="file.pdf"');
        res.setHeader('Content-type', 'application/pdf');

        res.send(data);
    }

Collectives™ on Stack Overflow

Create and Download PDF file from binary string with JS/TS

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related