Angular - Save blob in local text file?

Question

I have a plain text variable which I want to store and save on a .txt file using Angular.

So far I have tried the following:

var data = new Blob([text], {type: 'text/plain'});
const url= window.URL.createObjectURL(data);
window.open(url);

Being text the variable with the plain text content. It seems to work but it opens de blob on a new browser tab, and I need it to be downloaded as whatever.txt.

How can I achieve this? Thanks!

Finally found the solution here: JavaScript blob filename without link — Iñigo
– Iñigo, Commented Sep 16, 2019 at 7:47

Iñigo · Accepted Answer · 2020-06-29 15:27:22Z

4

The solution can be found here:

JavaScript blob filename without link

The steps are the following:

Create a hidden <a> tag.
Set its href attribute to the blob's URL.
Set its download attribute to the filename.
Click on the <a> tag.

edited Jun 29, 2020 at 15:27

answered Sep 16, 2019 at 7:48

Iñigo

2,02610 gold badges33 silver badges62 bronze badges

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

Comments

hanan · Accepted Answer · 2020-07-06 13:38:47Z

4

This is working code from my application

const file = new window.Blob([data], { type: contentType });

const downloadAncher = document.createElement("a");
downloadAncher.style.display = "none";

const fileURL = URL.createObjectURL(file);
  downloadAncher.href = fileURL;
  downloadAncher.download = fileName;
  downloadAncher.click();

answered Jul 6, 2020 at 13:38

hanan

1,9291 gold badge16 silver badges19 bronze badges

1 Comment

Royer Adames Over a year ago

can you share a stackblitz.com example? Having a live example would help

Collectives™ on Stack Overflow

Angular - Save blob in local text file?

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related