Javascript: a SIMPLE way to save a text file?

Question

I would like to offer to the user the opportunity to save his/her results, as displayed on the web page.

Using the browser's "save as" is no good, it saves the html code, or part of it, instead of saving what is displayed on the page. Even when the option is set to "save as text". There are local links etc.

Using localStorage would be worse. Imagine telling the user that his results are somewhere in a hidden directory and that he/she would need to decode sqlite files...

The examples I found online :

A) are too complicated

B) don't function

C) only show a bit of code and let you guess the rest

Some web sites offer "printer friendly" versions of their page. I could, on the click of a button, open in a new window, or tab, the list of results, in a no frill view. Then the user could "select all" and "copy/paste" to his/her favorite text editor. And save it.

I would like to do better. I would like to have a "Save results" button that would open the usual dialog box "where would you like to save this?" and offer, for instance, the choice between .txt and .rtf formats.

Some stuff I've read seem to hint that this would be illegal. If you could save as .exe, I would understand the security risk. But saving as .txt?

Does this answer your question? How to create a file in memory for user to download, but not through server? — Nathan Chu
– Nathan Chu, Commented Nov 28, 2020 at 14:37
<a href="data:application/octet-stream,field1%2Cfield2%0Afoo%2Cbar%0Agoo%2Cgai%0A">CSV Octet</a> : This says would you like to open the file <complicated name> which is of type application/octet-stream (18 bytes) — Alain Reve
– Alain Reve, Commented Nov 28, 2020 at 14:45
Try <a download="file.txt" href="data:application/octet-stream,field1%2Cfield2%0Afoo%2Cbar%0Agoo%2Cgai%0A">CSV Octet</a>. See developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download — Nathan Chu
– Nathan Chu, Commented Nov 28, 2020 at 14:48

Dharman · Accepted Answer · 2020-11-28 14:47:55Z

15

You can do it this way:

<a href="#" id="download">Download</a>

<script>
var fileName = "myfile.txt";
var fileContent = "Page content...";
var myFile = new Blob([fileContent], {type: 'text/plain'});

window.URL = window.URL || window.webkitURL;
var dlBtn = document.getElementById("download");

dlBtn.setAttribute("href", window.URL.createObjectURL(myFile));
dlBtn.setAttribute("download", fileName);
</script>

This will ask the user to save a file called "myfile.txt" where they'd like to. The contents of the file is up to you.

edited Nov 28, 2020 at 14:47

Dharman♦

33.9k27 gold badges103 silver badges157 bronze badges

answered Nov 28, 2020 at 14:42

CPlusPatch

3683 silver badges12 bronze badges

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

1 Comment

Osamah Sep 27 at 1:07

can i bypass the user to save manualy ?

bikz · Accepted Answer · 2022-09-20 14:06:51Z

7

I liked CPlusPatch's solution; unfortunately, I kept experiencing intermittent security failures with it, all of which referenced Blob.

I found a very similar solution here which doesn't use Blob, and I haven't encountered any security issues with it.

function download(filename, text) {
  var element = document.createElement('a');
  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
  element.setAttribute('download', filename);

  element.style.display = 'none';
  document.body.appendChild(element);

  element.click();

  document.body.removeChild(element);
}

// Start file download.
download("hello.txt","This is the content of my file :)");

This download function creates a (hidden) dummy tag in the document, sets its 'href' attr to the file contents you want downloaded, simulates a click on the added tag (triggering a download of the contents), then removes the tag from the body of the document.

edited Sep 20, 2022 at 14:06

answered Sep 19, 2022 at 15:09

bikz

6171 gold badge9 silver badges15 bronze badges

2 Comments

khokm Over a year ago

Is appending a to body before calling click necessary?

bikz Over a year ago

It's been a while since I Looked at this code. After testing old code, it seems to work fine when I take out document.body.appendChild of the a (and removeChild as well), however, my setup/site was not complex. I'm not well-versed enough in js or HTML to understand why the original author suggested appending it; see this about creating an element without appending it. stackoverflow.com/questions/55244274/… Maybe this would be relevant if you're dealing with multiple documents (I was not)? Wish someone with more HTML experience would chime in.

user14520680 · Accepted Answer · 2020-11-28 15:14:05Z

2

const link = document.querySelector('a');
link.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent('insert your text here'));

link.setAttribute('download', 'res.txt');

<a>File</a>

Here, we use the HTML 5 download attribute and encode a URI component of text

answered Nov 28, 2020 at 15:14

user14520680

Comments

Veselina Spasova · Accepted Answer · 2020-11-28 15:00:42Z

-3

You could reuse javacript windows print functionality onclick="window.print();" or write your own

edited Nov 28, 2020 at 15:00

answered Nov 28, 2020 at 14:53

Veselina Spasova

13 bronze badges

Collectives™ on Stack Overflow

Javascript: a SIMPLE way to save a text file?

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related