Convert Pdf response from API Call to Blob and generate Blob Url

Question

I am trying to convert the response to blob and then generate url to access that. The response from the get request is Pdf.

Here's what I am doing.

this.$http.get<string>(
        invoicePath
      ).then((response:any)=> {
        console.log("CREATING A BLOB")
        console.log("RESPONSE BLOB: ", response.data); 
        const blob:any = new Blob([response], { type: 'application/pdf; charset=utf-8' });
        console.log("RESPONSE BLOB: ", blob);
        const url= window.URL.createObjectURL(blob);
        // window.open(url);
        return url
        //window.location.href = response.url;
      })

The url returned gives me the below error message.

try this npmjs.com/package/file-saver/v/1.3.2

Manish
– Manish

2020-02-18 07:31:46 +00:00
Commented Feb 18, 2020 at 7:31 — Manish
– Manish, Commented Feb 18, 2020 at 7:31

Ankit Singh · Accepted Answer · 2020-02-18 09:14:48Z

2

We have to convert the response to ArrayBuffer first.

this.$http.get<string>(
        invoicePath, {responseType:'arraybuffer'}
      ).then((response:any)=> {
        console.log("CREATING A BLOB")
        console.log("RESPONSE BLOB: ", response.data); 
        const blob:any = new Blob([response.data], { type: 'application/pdf; charset=utf-8' });
        console.log("RESPONSE BLOB: ", blob);
        const url= window.URL.createObjectURL(blob);
        // window.open(url);
        return url
        //window.location.href = response.url;
      })

answered Feb 18, 2020 at 9:14

Ankit Singh

2731 gold badge3 silver badges12 bronze badges

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

Collectives™ on Stack Overflow

Convert Pdf response from API Call to Blob and generate Blob Url

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related