In HTML I need example code on how to save text box input to a .txt file

[snozking]

In HTML just a text box with an enter button and then it saves the textbox to a local file.

 

Ive tried to do this but nothing I found works and I dont understand much. I only know you need javascript.

 

[AbydosOne]

11 minutes ago, snozking said:

In HTML just a text box with an enter button and then it saves the textbox to a local file.

 

Ive tried to do this but nothing I found works and I dont understand much. I only know you need javascript.

I think for security reasons you can't generate local files programmatically in JS.

 

The way I see to do it, you'd need a web server that receives the content of the box and serves it back as a file.

[snozking]

3 minutes ago, AbydosOne said:

I think for security reasons you can't generate local files programmatically in JS.

 

The way I see to do it, you'd need a web server that receives the content of the box and serves it back as a file.

sad

[pythonmegapixel]

Is this an example of the X-Y problem?

[snozking]

2 minutes ago, pythonmegapixel said:

Is this an example of the X-Y problem?

maybe but idk. i know what i need but i dont know how to implement it

[AbydosOne]

21 minutes ago, snozking said:

i know what i need

"Why do you need it?" is what the X-Y Problem is trying to get at. Maybe the reason you need this specific application has already been solved in a more general sense.

[Sauron]

48 minutes ago, snozking said:

In HTML just a text box with an enter button and then it saves the textbox to a local file.

Impossible. Web pages don't have access to the local file system for fairly obvious reasons. You can do this if you have a backend.

 

Or, depending on what you need, you could write a native program or at least something that runs outside the browser that does it.

[Origami Cactus]

9 minutes ago, Sauron said:

Impossible. Web pages don't have access to the local file system for fairly obvious reasons. You can do this if you have a backend.

 

Or, depending on what you need, you could write a native program or at least something that runs outside the browser that does it.

Not the op but could you do it so that it brings up the "download file" dialogue without backend?

Websites can download a file to my pc.

[mariushm]

You could probably encode the text as base64 string and put it in the url field of a "Download" button and tell user to right click and say save as or something ...

 

ex 

data:text/plain;base64,SGVsbG8sIFdvcmxkIQ==

<p><a href="data:text/plain ... "> Download </a> document </p>

 

The above base64 encoding is for "Hello, World" as shown here : https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs

 

There's javascript function to convert to base64 and you can change the url href with javascript. Don't know if you can force click on the button through javascript as if user clicks on it.

 

the same data encoding scheme is used to embed small icons / images in html pages without loading different resources.

 

note there's some limitations about maximum url lengths , some browsers limit to 65k bytes so you'd be limited to around 20-30K of text, other browsers may limit you to 10-16k  so about half of that as actual content after converting back from base64

 

edit : maybe see if adding the "download" keyword will trigger the download/save as window ... it's something relatively new

 

<a href=" url"   download > Download me </a> 

 

See  https://www.webfx.com/blog/web-design/download-attribute/

 

 

[shadow_ray]

Of course it's possible. This should work

<!-- HTML -->
<a id="link" target="_blank" download="file.txt">Download</a>

 

// only client side JS
var data = ["Hello world!"];
var file = new File(data, "file.txt", {type: 'text/plain'});
var url = URL.createObjectURL(file);
document.getElementById('link').href = url;

Live CodePen example

[Sauron]

8 hours ago, Origami Cactus said:

Not the op but could you do it so that it brings up the "download file" dialogue without backend?

sure, but that's not what was asked. it may be an acceptable solution depending on what the actual requirement is. if user input is acceptable then I wonder why they wouldn't just use notepad.

[bullipatty]

Hm, I've handled multiple GB sized Zip files with blazor wasm and from my experience the solution of @shadow_ray should be the most performant.
And to have a little more complete example:

html:

<textarea id="textInput"></textarea><br>
<button onclick="downloadText('text.txt')">Download</a>

js:

const textInput = document.getElementById('textInput');

function downloadText(fileName) {
  const data = [textInput.value];
  const file = new File(data, fileName, {type: 'text/plain'});
  const url = URL.createObjectURL(file);
  triggerDownload(fileName, url);
  URL.revokeObjectURL(url);
}

function triggerDownload(fileName, url) {
  const anchorElement = document.createElement('a');
  anchorElement.href = url;
  anchorElement.download = fileName ?? '';
  anchorElement.click();
  anchorElement.remove();
}

[theWanderersCompanion]

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <textarea oninput="document.querySelector('a').href = 'data:text/plain;base64,' + btoa(this.value)"></textarea>
  <a href="data:text/plain;base64," download="text.txt"><button>enter</button></a>
</body>

</html>

here ya go. it's one line of javascript