9

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?

Alain Reve
  • 163
  • 1
  • 1
  • 11
  • 2
    Does this answer your question? [How to create a file in memory for user to download, but not through server?](https://stackoverflow.com/questions/3665115/how-to-create-a-file-in-memory-for-user-to-download-but-not-through-server) – Nathan Chu Nov 28 '20 at 14:37
  • CSV Octet : This says would you like to open the file which is of type application/octet-stream (18 bytes) – Alain Reve Nov 28 '20 at 14:45
  • Try `CSV Octet`. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download – Nathan Chu Nov 28 '20 at 14:48

4 Answers4

11

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.

Dharman
  • 30,962
  • 25
  • 85
  • 135
CPlusPatch
  • 318
  • 2
  • 11
2

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.

bikz
  • 415
  • 4
  • 11
0

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

Veselina Spasova
  • 1
  • 3
0

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