0

I wanted to try giving an output to a file using a Small screen on HTML. Everytime I click on the button I want the text in the file to be replaced. This is the code I wrote:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>This is Web App</title>
</head>
<script>
function createDoc()
{
var doc=document.open("answer.txt","replace");
var txt="<html><body>You clicked Allow</body></html>";
doc.write(txt);
doc.close();
}

function createDoc2()
{
var doc=document.open("answer.txt","replace");
var txt="<html><body>You clicked Deny</body></html>";
doc.write(txt);
doc.close();
}
</script>

<body>
<h1> This is the visitor at your house</h1>
<img src = "./images/chef.gif" width="130" height="101" />
<br />
<button name="Yes" type="button" onclick="createDoc()">Allow! </button>
<button name="No" type="button" onclick="createDoc2()">Deny! </button>


</body>
</html>

I know it is not the correct way to do it but am trying to learn. Please help me and point out my mistakes and tell me how to correct them if possible. I know there might be plenty. I am just trying to teach myself at this point. Your help is much appreciated.

Abhranil Das
  • 5,702
  • 6
  • 35
  • 42
And_Learner
  • 5
  • 1
  • 1
  • 2

1 Answers1

0

If you just want to download a file generated by your page, this question may help:

Download data url file

The idea is that you need to encode your data as base64 (not hard, modern browsers support btoa) and direct the browser to open it. If you trick it by giving the file a mime-type it doesn't know how to open (such as application/octet-steam), it will download the file instead of displaying it.

The problem with this solution is that you cannot name the file.

If you want to name the file, I'd POST the data to your webserver, write it to a file on the server, then do a window.open with the path to the file. This will allow you to download the file in question.

There's a draft in progress to allow Javascript to write to a file directly, but this file will be in a sandboxed location that users don't have direct access to. This is only for web-apps to store large amounts of data on the client. From your question, this is likely not what you want. Try one of the above solutions.

Community
  • 1
  • 1
beatgammit
  • 19,817
  • 19
  • 86
  • 129
  • [HTML5Rocks - Saving-generated-files-on-the-client-side](http://updates.html5rocks.com/2011/08/Saving-generated-files-on-the-client-side) – Derek 朕會功夫 Nov 27 '12 at 07:29
  • @Derek- `though unfortunately it will eventually be removed from the spec`. Nothing supports this. – beatgammit Nov 27 '12 at 07:32
  • They are not removing it according to [the spec](http://www.w3.org/TR/file-writer-api/#the-filesaver-interface). – Derek 朕會功夫 Nov 27 '12 at 07:35
  • @Derek - From the spec: `Since this is intended to be used only with the sandboxed filesystem...`. Sounds like you won't be able to save to an arbitrary location on the client. – beatgammit Nov 27 '12 at 07:38
  • We are not using the `FileWriter` here, we are using the `FileSaver`. `The FileSaver(data) constructor takes one argument: the Blob of data to be saved to a file.` – Derek 朕會功夫 Nov 27 '12 at 07:47
  • As posted elsewhere, only supported on Chrome. And it's still just a working draft. – beatgammit Nov 27 '12 at 07:49
  • If HTML5 is not acceptable, then telling the server to do all this is the way to go. – Derek 朕會功夫 Nov 27 '12 at 07:52
  • @Derek: I understand these approaches a little bit. The one with blobBuilder is nice. Just another question if you dont mind. Since you said that it's almost not possible (with the exception of your example) to save a file on client machine, Is it easier to write to a file on the Server? How can I do that considering the code above? – And_Learner Nov 27 '12 at 19:40
  • @And_Learner - You will have to use AJAX or `POST` to tell your server to write/create files, then return back that URL to the file. On the server side, you can use PHP, JavaScript, or other languages you want to achieve this. – Derek 朕會功夫 Nov 27 '12 at 23:56
  • Thanks Derek and tjameson. Your help is much appreciated. – And_Learner Nov 28 '12 at 08:30