Why does this method of downloading html form info as a string / .txt file remove all newlines from the file?

Question

I have an html form with some inputs that I'd like the user to be able to download as a text file.

<form onsubmit="download()" action=''>
    <input type="text" id="name">
    <input type="text" id="age">
    <input type="text" id ="sex">
    <button type="submit" id="submit-button">Download</button>
</form>

The javascript to download the file is as follows

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

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

    element.click();

    document.body.removeChild(element);
}

function makeString() {
    return "Name: " + $("#name").val() + "\nAge: " + $("#age").val() + "\nSex: " + $("#sex").val();
}

If I enter into these inputs the values John, 25, and Male, and hit download, I end up with a file that looks like Name: JohnAge: 25Sex: Male. What's happening to the newlines here? And what can I do to keep them in the file? Thanks!

The part of my code that creates the text file and downloads it is from an answer to this post, which is at least 4 years old. There may very well be a better way to do this and I'm open to suggestions on that front as well.

Are you on Windows? Windows files use `\r\n` for newlines, whereas `\n` is for Unix/Mac/basically anything else. Browsers support `\n` but Windows as an OS doesn't. — IceMetalPunk, Jul 09 '19 at 19:53

Sabee · Accepted Answer · 2019-07-09T20:11:32.453

When you use encodeURIComponent, you also need to use \r for adding a new line in your string, otherwise \n will be ignored (for Windows (and many old OS) code for the end of the line - 2 characters, \r\n, in that order).

Two different characters.

\n is used as a terminator in Unix text files.
\r is used as a terminator for the end of a line in Mac text files.
\r\ n (i.e., both) are used to terminate lines in Windows and DOS text files.

Two different characters for different operating systems. It also plays a role in data transmitted via TCP / IP, which requires the use of \r\n.

 function makeString() {
        return "Name: " + $("#name").val() + "\r\nAge: " + $("#age").val() + "\r\nSex: " + $("#sex").val();
    }

I also recomend to use return false; in onsubmit fuction to prevent the submit action.

function download() {


    var _text = makeString();
    var element = document.createElement('a');
    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(_text));
    element.setAttribute('download', 'example.txt');

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

    element.click();

    document.body.removeChild(element);
    return false;
}

Thanks! So, I'm sort of confused as to why I never had to do this when manipulating strings in python and java (as far as I know). Does js just not automatically change it to the correct newline chars because of its heavy use in data transmission, or is there another reason? — Padaca, Jul 10 '19 at 13:21
I don't want to give an inaccurate answer, but I think it can be related to the browser which runs the javascript. Java and python has a pre installed compiler in your local machine. — Sabee, Jul 10 '19 at 18:40

score 1 · Answer 2 · answered Jul 09 '19 at 20:04

1

For windows, new line is recognized as \r\n. Notepad will not be able to understand \n alone although notepad++ will.

answered Jul 09 '19 at 20:04

Nikita Saboo

73
5

score -1 · Answer 3 · answered Jul 09 '19 at 20:02

-1

I'm not 100% on what's going on, but you trying using "\r" instead of "\n"...

answered Jul 09 '19 at 20:02

Brian Swisher

393
1
7

Don't use `\r` exclusively. That hasn't been in-use in many years. – Brad Jul 09 '19 at 20:03
Though "\n" was working too in CodeSandbox. When I used both "\n\r", there was two line breaks (too many). Either way, you should give it a try (in a non-permanent way) to see what you get. – Brian Swisher Jul 09 '19 at 20:15
`\r` is what old Apple systems used. `\n` is what current OS X, Linux, most everybody uses. `\r\n` is what Windows uses. `\n\r` isn't a thing, so if you put that in on your Mac, your text editor is being nice by accepting `\n` and old-style `\r` separately. – Brad Jul 09 '19 at 20:23

Why does this method of downloading html form info as a string / .txt file remove all newlines from the file?

3 Answers3