Download a text file in HTML

Question

I want to write a html code to enable downloading a user entered input value saved in a text file. As in the below html, when the 'Save' button is pressed, the input value should save in the user computer as a .text file.

<html>

<head>
    <script type="text/javascript">
        function write_below(form) {
            var input = document.forms.write.input_to_write.value;
            document.getElementById('write_here').innerHTML = "Your input was:" + input;
            return false;
        }
    </script>
</head>

<!--Insert more code here-->

<body>
    <form name='write' onsubmit='return write_below(this);'>
        <input type="text" name='input_to_write'>
        <input type="button" value="save" />
    </form>
    <div id='write_here'></div>
</body>

</html>

Can anyone help me in this problem?

You can't write to an arbitrary location on the file system with Javascript. You can write to a sandbox, but I'm not sure why you'd want to. — CodingIntrigue, May 30 '14 at 09:04
need to use any server side coding such as PHP or ASP.NET to do the same. — Merlin, May 30 '14 at 09:05
@MerlinRajaselvi Even a server can't write arbitrary files to a user's computer. — JJJ, May 30 '14 at 09:05
But it's certainly possible to generate a file and trigger the download prompt where the user can decide if and where to save the file. See e.g. http://stackoverflow.com/questions/2897619/using-html5-javascript-to-generate-and-save-a-file And if you just want to store information on the user's computer, it's better to use localstorage. — JJJ, May 30 '14 at 09:07
You can also [use techniques like this](http://stackoverflow.com/questions/3916191/download-data-url-file). There's some possible misinterpretation and general FUD spreading here. — AD7six, May 30 '14 at 09:10
@user3127499, [that's not how it works](http://stackoverflow.com/help/closed-questions) — Liam, May 30 '14 at 09:14

score 7 · Accepted Answer · 2014-06-04T06:32:30.707

The data URI scheme is a URI scheme (Uniform Resource Identifier scheme) that provides a way to include data in-line in web pages as if they were external resources.

You can use following uri to emulate an external text file. Just copy the code to your address bar to see what would happen.

data:application/txt,Hello World!

Full code or check out this fiddle:

<html>

<head>
    <title>Fake download via datauri</title>
</head>

<body>

    <textarea cols="50" rows="10" id="source">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>
    <br>
    <button type="button" id="save" title="Save as text file">Save</button>

    <script type="text/javascript">
        // when document is ready
        document.getElementById("save").onclick = function() {
            // when clicked the button
            var content = document.getElementById('source').value;
            // a [save as] dialog will be shown
            window.open("data:application/txt," + encodeURIComponent(content), "_self");
        }
    </script>
</body>

</html>

Some old fashioned browsers don't support this feature. Full list

Besides, make sure the content isn't too long in case your browser rejects the request.

Thanks for helping. That was the solution what I was seeking for. — thilinistg, May 31 '14 at 10:05

score 0 · Answer 2 · answered May 30 '14 at 09:40

You can do that by creating a blob-url and a link to it. The link (and not a button !) is necessary to have the download attribute, which specifies the default name of the file.

However, because I'm not sure of the compatibility of this attribute, I set a binary mime type because text/plain is known by the browsers and just opened instead of showing the download window.

var text = "foo\nbar\nbaz";

var fileBlob = new Blob([text], {type: "application/octet-binary"});

var link = document.createElement("a");
link.setAttribute("href", URL.createObjectURL(fileBlob));
link.setAttribute("download", "HelloWorld.txt");
link.appendChild(document.createTextNode("Save file"));
document.body.appendChild(link);

score -1 · Answer 3 · answered May 30 '14 at 09:11

By using the foloowing PHP function you can download files:

function dowld($path)
{
    // get the file mime type using the file extension
    $mime = get_mime_by_extension($path); // Build the headers to push out the file properly.
    header('Content-Description: File Download');
    header('Pragma: public');
    header('Expires: 0');
    header('Cache-Control: must-revalidate, post-check=0, pre-check=0');
    header('Cache-Control: private',false);
    header('Content-Type: '.$mime);
    header('Content-Disposition: attachment; filename="'.basename($path).'"');
    header('Content-Transfer-Encoding: binary');
    header('Connection: close');
    ob_clean();
    flush();
    readfile($path);
}

$path refers to the path to the file to download.

Eg:

dowld('./files/myfile.txt');

Download a text file in HTML

3 Answers3