How to read a blob data as file in Angular?

Question

I have an API that is fetching this kind of data:

JVBERi0xLjcNCiW1tbW1DQoxIDAgb2JqDQo8PC9UeXBlL0NhdGFsb2cvUGFnZXMgMiAwIFIvTGFuZyhlbi1VUykgL1N0cnVjdFRyZWVSb290IDE4IDAgUi9NYXJrSW5mbzw8L01hcmtlZCB0cnVlPj4vTWV0YWRhdGEgMTAxIDAgUi9WaWV3ZXJQcmVmZXJlbmNlcyAxMDIgMCBSPj4NCmVuZG9iag0KMiAwIG9iag0KPDwvVHlwZS9QYWdlcy9Db3VudCAyL0tpZHNbIDMgMCBSIDE0IDAgUl0gPj4NCmVuZG9iag0KMyAwIG9iag0KPDwvVHlwZS9QYWdlL1BhcmVudCAyIDAgUi9SZXNvdXJjZXM8PC9Gb250PDwvRjEgNSAwIFIvRjIgOSAwIFIvRjMgMTEgMCBSPj4vRXh0R1N0YXRlPDwvR1M3IDcgMCBSL0dTO

This is not the full data showed (the actual is quite long)

I want this data to be viewed as a file, it can be anything like an image, pdf, video, zip, etc.

What problem is if I set the responseType of the API to arraybuffer I need to convert the response data to BLOB but for that, I need the file Type also which I am not having.

Is there any solution to view the data directly as a file?

Michael Kang · Accepted Answer · 2020-12-12 04:54:19Z

1

Try file-saver:

npm install file-saver

and

import { saveAs } from 'file-saver';
var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(blob, "hello world.txt");

answered Dec 12, 2020 at 4:54

Michael Kang

53k16 gold badges108 silver badges138 bronze badges

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

2 Comments

avishekdr Over a year ago

I don't know what will be fileType of the data received this can be anything

vighnesh153 Over a year ago

You should get that in response from API under contentType.

Collectives™ on Stack Overflow

How to read a blob data as file in Angular?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related